単行・複数行のテキストオーバーフローと省略表示を実現するCSS実装方法

この記事では主に、単行および複数行のテキストでの省略記号のオーバーフロー表示を実現するための CSS の実装方法を紹介します。必要な友人に共有します。単一行のテキストに省略記号のオーバーフロー表示を実装します。学生の皆さんは、text-overflow:ellipsis 属性の使用方法を知っておく必要があります。もちろん、部分的なブラウジングと互換性を持たせるために、width 属性も追加する必要があります

1. 単一行。 overflow

1、単一行のオーバーフロー、余分な部分が表示されます...またはインターセプトされます。前提には幅が必要です。

CSS: {width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}、クリップとしてインターセプト;

実装コード:

width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;

効果は次のとおりです:

ただし、この属性のみ単一行をサポートします。 テキストのオーバーフローは省略記号を表示します。 複数行のテキスト オーバーフローを実装して省略記号を表示したい場合はどうすればよいでしょうか。 次に、次のように、複数行テキストの省略記号のオーバーフロー表示に注目してみましょう。

2. 複数行のオーバーフロー

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

実装方法:

display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;

効果は図の通りです:

適用範囲:
WebKitのCSS拡張属性を使用しているため、この方法が適しています。 WebKit ブラウザーおよびモバイル端末の場合;

注:

1.-webkit-line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。 この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。一般的に結合される属性:
2.display: -webkit-box; オブジェクトをフレキシブル ボックス モデルとして表示するには、結合する必要があります。
3.-webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得する属性と組み合わせる必要があります。

実装方法:

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

適用範囲:

このメソッドは応用範囲が広いですが、テキストが行を超えない場合には省略記号も表示されます。このメソッドはjsで最適化できます。
注:

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

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

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

Script House エディターの追加:

ie コア ブラウザーは行の高さと高さを定義する必要があります。 -webkit-line-clamp は数行を意味します。たとえば、

line-height: 20px;

max-height: 40px;

表示: -webkit-box;

-webkit-box-orient: 垂直;

-webkit-line-clamp: 2;

overflow: hidden;

-webkit-line-clamp

-webkit-line-clamp は、CSS ドラフト仕様には含まれていない、サポートされていない WebKit プロパティです。

ブロック要素に表示されるテキストの行数を制限します。 この効果を実現するには、他の外部 WebKit プロパティと組み合わせる必要があります。一般的に結合される属性:

display: -webkit-box; オブジェクトをフレキシブル ボックス モデルとして表示するには、結合する必要があります。
-webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得する属性と組み合わせる必要があります。
text-overflow は、複数行のテキストの場合に、範囲を超えるテキストを省略記号「...」で非表示にするために使用できます。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS アイコンをテキストと揃える方法

以上が単行・複数行のテキストオーバーフローと省略表示を実現するCSS実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。