CSS テキストが単一行および複数行の省略記号を超えていることを認識するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS テキストが単一行および複数行の省略記号を超えていることを認識するにはどうすればよいですか?

不言

リリース： 2018-09-19 10:45:37

オリジナル

2755 人が閲覧しました

Web ページをデザインするときに、テキストが長すぎてページが見苦しくなる場合があります。では、この問題を解決するにはどうすればよいでしょうか。この記事では、省略記号を越える単行テキストと省略記号内の複数行テキストをcssで実装する方法を紹介します。

まず最初に、省略記号を超えて 1 行のテキストを表示する CSS メソッドを見てみましょう。

css 単一行のテキストに省略記号のオーバーフロー表示を実装するには、text-overflow:ellipsis 属性 を追加する必要があります。 width 属性は部分的なブラウジングと互換性があります。

#省略記号を超える CSS 単一行テキストの実装コード:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8"> 
<title>省略号 test</title> 
<style type="text/css"> 
*{ 
margin:0; 
padding:0; 
} 
body{ 
padding:10px; 
font-family:Arial; 
} 
#test { 
position:relative; 
width:150px; 
height:20px; 
line-height:20px; 
text-overflow:ellipsis; 
white-space:nowrap; 
*white-space:nowrap; 
overflow:hidden; 
border:1px solid #999; 
} 
#test span{ 
position:absolute; 
top:0; 
right:0; 
display:block; 
float:left; 
} 
</style> 
</head> 
<body> 
<div id="test">php中文网php中文网php中文网php中文网php中文网php中文网php中文网</div> 
</body> 
</html>

ログイン後にコピー

省略記号を超える CSS 単一行テキストの効果は次のとおりです:

CSS テキストが単一行および複数行の省略記号を超えていることを認識するにはどうすればよいですか?

text-overflow: ellipsis 属性は、1 行のテキストでの省略記号のオーバーフロー表示のみをサポートします。複数行のテキストでの省略記号のオーバーフロー表示を実装したい場合はどうすればよいでしょうか。次に、省略記号

を超えて複数行のテキストを実装する css メソッドについて説明していきます。 (text-overflow:ellipsis 属性の詳細については、css マニュアルを参照してください。)

1. CSS は、複数行のテキストが省略記号を超えると、 css 属性を使用して直接設定できます (-webkit kernel のみが機能します)

構文:

  overflow: hidden;  
  text-overflow: ellipsis; 
  display: -webkit-box;  
  -webkit-line-clamp: 2;  
  -webkit-box-orient: vertical;

ログイン後にコピー

ほとんどのモバイルブラウザーは WebKit コアに基づいているため、この方法が適していますモバイル端末の場合;

-webkit -line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。これは、CSS ドラフト仕様には含まれていない、サポートされていない WebKit プロパティです。

display: -webkit-box オブジェクトをフレキシブルボックスモデルとして表示します。

-webkit-box-orient は、フレックスボックスオブジェクトの子要素の配置を設定または取得します。

text-overflow: 省略記号は複数行のテキストに使用され、省略記号「...」を使用して範囲を超えるテキストを非表示にします。

2. CSS を使用して、絶対位置とパディングを使用して省略記号を超えた複数行のテキストを実装します (クロスブラウザーソリューション)

構文:

p{
position: relative; 
line-height: 20px; 
max-height: 40px;
overflow: hidden;
}
p::after{
content: "..."; 
position: absolute; 
bottom: 0; 
right: 0; 
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

ログイン後にコピー

このメソッドの原理は、まずテキストを含む要素に ... を埋め込み、次に要素の右側に ... (padding-right) の位置を残します。テキストを含み、最後に絶対配置を使用して右側のパディング右領域に配置します。

注: この方法には幅広い用途がありますが、テキストが行を超えない場合にも省略記号が表示されます。この方法は js で最適化できます。

注:

余分なテキストが露出しないように、高さを line-height の整数倍に設定します。

テキストの半分だけが表示されないようにするには、p::after にグラデーションの背景を追加します。

ie6-7 はコンテンツの内容を表示しないため、互換性を持たせるには、ie6-7 と互換性のあるタグを追加する必要があります (例: ...)。 ie8 では、 ::after を :after に置き換える必要があります。

この記事はここで終了します。省略記号以降の CSS テキストの詳細については、php 中国語 Web サイトを参照してください。

以上がCSS テキストが単一行および複数行の省略記号を超えていることを認識するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。