オーバーフローテキストは省略します

ワンラインの省略

表示ブロック;
オーバーフロー:隠されました;
ホワイトスペース:NOWRAP。
テキストオーバーフロー:省略記号。

複数の行は、(デジタル・ラインの数がカスタムである)/(注オーバーフロー隠された高さ)は省略されています

オーバーフロー:隠されました;
テキストオーバーフロー:省略記号。
表示:-webkit-ボックス。
-webkit-ボックスオリエント:縦;
-webkitラインクランプ:3。

  小さな例

1  < スタイル> 
2      .dan { 
3             のfont-size 14px ; 
4  #000000 
5          行の高さ40ピクセル
6          高さ40ピクセル
7  300ピクセル; 
8          背景ピンク; 
9          / * 单行省略* / 
10          表示ブロック
11          オーバーフロー隠されました; 
12          ホワイトスペースNOWRAP 
13          テキストオーバーフロー省略記号
14      } 
15      .duo { 
16          の高さ120ピクセル
17  300ピクセル; 
18          背景ピンク; 
19          行の高さ40ピクセル
20          マージントップ20ピクセル; 
21          / * 多行省略* / 
22         オーバーフロー隠された; 
23は、         テキストオーバーフロー省略記号; 
24          表示-webkit-ボックス; 
25          -webkit-ボックス-オリエント; 
26である         -webkitラインクランプ3 ; 
27      } 
28  </ スタイル> 
29  < ボディ> 
30      < DIV クラス=「ダン」>これは、単一の行は、この単一のラインを省略省略されることが一つの方法である省略省略されることが一つの方法である</ DIV > 
31である     < DIVクラス=「デュオ」>この複数行のマルチラインが省略され、これは、この複数行の複数行では省略されて省略し、これは、この複数行の複数行では省略され、これは、この複数行の複数行に省略されている省略は、この子zahuishiオミット省略されていますzahuishi子供zahuishi子供</ divの> 
32  </ ボディ> 
33である </ HTML >

 

おすすめ

転載: www.cnblogs.com/xiaoyaolang/p/11906209.html