マルチラインテキストオーバーフロー省略記号(...)

単行テキストオーバーフロー省略記号の表示

width:20%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

WebKitブラウザまたはモバイル側のページ(マルチラインオーバーフロー)
-webkit-line-clampは、1つのブロック要素に表示されるテキストの行数を制限します.この効果を達成するには、他のWebKitプロパティを組み合わせる必要があります.共通の結合プロパティ:

display:-webkit-box:結合する必要があるプロパティは、オブジェクトを弾性伸縮ボックスモデルとして表示します.

-webkit-box-orient:結合する必要があるプロパティで、伸縮ボックスオブジェクトのサブエレメントの配列方法を設定または取得します.

text-overflow: ellipsis;複数行のテキストで使用できる場合は、省略記号「...」で範囲外のテキストを非表示にします.

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

ブラウザ間互換性のあるシナリオ
比較的信頼できる簡単な方法は、相対的に位置決めされた容器の高さを設定し、省略記号(...)を含む要素でシミュレーションすることです.

p {
 position:relative;
 line-height:1.4em;
 /* 3 times the line-height to show 3 lines */
 height:4.2em;
 overflow:hidden;
}
p::after {
 content:"...";
 font-weight:bold;
 position:absolute;
 bottom:0;
 right:0;
 padding:0 20px 1px 45px;
 background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}