1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

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

1. 1 行がオーバーフローした場合、超過部分は表示されます...または、遮断されます。前提は幅でなければなりません。
CSS: {width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}、クリップとしてインターセプトされます。

実装コード:

幅:300ピクセル;    
オーバーフロー: 非表示;    
テキストオーバーフロー:省略記号;    
whitewhite-space: nowrap;

効果は以下のようになります。


ただし、このプロパティは、単一行テキストのオーバーフローに対する省略記号の表示のみをサポートしています。複数行テキストのオーバーフローに対して省略記号を表示したい場合はどうすればよいでしょうか。

次に、次のように複数行のテキストがオーバーフローしたときに省略記号を表示することに焦点を当ててみましょう。

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

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

実施方法：

ディスプレイ: -webkit-box;    
-webkit-box-orient: 垂直;    
-webkit-line-clamp: 3;    
オーバーフロー: 非表示;

効果は以下のようになります。


適用範囲:

WebKit の CSS 拡張プロパティが使用されるため、この方法は WebKit ブラウザとモバイル デバイスに適用できます。

注記：

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

実施方法：

p{位置: 相対; 行の高さ: 20px; 最大の高さ: 40px; オーバーフロー: 非表示;}    
p::after{content: "..."; position: absolute; bottombottom: 0; rightright: 0; padding-left: 40px;    
背景: -webkit-linear-gradient(左、透明、#fff 55%);    
背景: -o-linear-gradient(rightright, 透明, #fff 55%);    
背景: -moz-linear-gradient(rightright, 透明, #fff 55%);    
背景: 線形グラデーション(右から右、透明、#fff 55%);    
}

適用範囲:
この方法は応用範囲が広いですが、テキストが行を超えない場合は省略記号が表示されます。この方法は、js と組み合わせて最適化できます。

注記：

1. 高さを行の高さの整数倍に設定して、高さを超えるテキストが表示されないようにします。
2. p::after にグラデーション背景を追加すると、テキストが途中までしか表示されないのを防ぐことができます。
3. IE6-7 ではコンテンツが表示されないため、IE6-7 と互換性を持たせるにはタグを追加する必要があります (例: <span>…<span/>)。IE8 と互換性を持たせるには、::after を :after に置き換える必要があります。

123WORDPRESS.COM 編集者は次のように付け加えています:

IEベースのブラウザではline-heightとheightを定義する必要があり、-webkit-line-clampは数行を意味します。例えば

行の高さ: 20px;

最大高さ: 40px;

ディスプレイ: -webkit-box;

-webkit-box-orient: 垂直;

-webkit-line-clamp: 2;

オーバーフロー: 非表示;

-webkit ラインクランプ

-webkit-line-clamp は、CSS ドラフト仕様には記載されていない、サポートされていない WebKit プロパティです。
ブロック要素に表示されるテキストの行数を制限します。 この効果を実現するには、他の特殊な WebKit プロパティを組み合わせる必要があります。共通の組み合わせプロパティ:
display: -webkit-box; は、オブジェクトを弾性ボックス モデルとして表示する必須属性です。
-webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得するプロパティと組み合わせる必要があります。
text-overflow を使用すると、複数行のテキストの場合に、範囲を超えたテキストを省略記号「...」で非表示にすることができます。