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

単一行のテキスト内で省略記号のオーバーフロー表示を実現したい場合は、 text-overflow:ellipsis 属性を使用することをご存知でしょう。もちろん、部分的なブラウジングと互換性を持たせるために width 属性も追加する必要があります。

1. 単一行のオーバーフロー

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

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

実装コード:

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

効果は図に示すとおりです。 :

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

次に、次のように、複数行テキスト内の省略記号のオーバーフロー表示に注目してみましょう。

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 と互換性を持たせるためのタグを追加する必要があります (例: 45a2772a6b6107b401db3c9b82c049c2...d1bf6d6a16954ade8a6284a8272d757c)。 ::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 は、複数行のテキストの場合に、範囲を超えるテキストを省略記号「...」で非表示にするために使用できます。

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