転送： https://www.cnblogs.com/jing-tian/p/11048853.html#_label0

CSS3プロパティ - テキスト行の数は、ラインクランプコントロール

======

ディレクトリ

説明：

テキスト

トップに戻ります

説明：

表示されたブロック要素内のテキストの行数を制限します。

-webkit-ラインクランプは、非標準の属性（サポートされていないWebKitのプロパティ）で、それはドラフトCSSの仕様には表示されません。

この効果を達成するために、それは他の外国のWebKitプロパティの組み合わせを必要とします。属性の一般的な組み合わせ：

表示：-webkit-ボックス、弾性伸縮オブジェクトモデルの表示欄として、結合特性を有しています。
-webkit-ボックスオリエント必要な結合特性は、設定またはオブジェクトのサブエレメントカセットの伸縮構成を取得します。
テキストオーバーフローが、省略記号「...」範囲外の隠されたテキストを、テキストの複数行の場合に使用することができます。

今日は三行と略すコンテンツの要件のリストを掲示し、で、需要の最適化を受けた「...」省略記号

1 <！HTML DOCTYPE> 
 2 <HTML>が
 3 <HEAD> 
 4 <メタのcharset = "UTF-8"> 
 5 <タイトル>クラインクランプ</タイトル> 
 6 <スタイル>。     
 7 {■は。
 8の幅：200pxの、
 図9高さ：300ピクセルによって; 
10境界：1ピクセル黒色固体; 
11} 
12 {Pである
13は、ディスプレイである：-webkit-ボックス; 
14 -webkit-ボックス-オリエント：縦; 
15ラインクランプは:. 4 -webkit; / *設定された最大要素P 4行目、親要素の幅* /埋めるための唯一の明白な必要性
16テキストオーバーフローを：省略記号; 
17オーバーフロー：隠された; 
18である/ * autoprefixer：OFF * /
19 -webkit-ボックス・オリエント：垂直; 
20 / * autoprefixer：* / ON 
21 / *コード環境なぜなら関係-webkit-ボックスオリエントのこのキーワードautoprefixer除外されるフィルタリングの行為から除外してもよい* / 
22 
23 
} 24 
25 </スタイル> 
26 </ HEAD>は
27 
28 <BODY> 
29 <DIV CLASS = "ボックス"> 
30 <P>静的：ノーマルストリームオブジェクトをたどります。上、右、下、左、およびその他の属性は適用されません。相対：オブジェクトがノーマルストリームに従い、従来のフローにおける自己位置が上、右、下、左プロパティによりオフセットがノーマルストリームの要素への参照に影響を及ぼしません。絶対：ノーマルストリームからのオブジェクト、上部の使用、右、下、左、およびその他の属性絶対位置、</ P> 
31 </ DIV>である
</ BODY> 32 
33 </ HTML>であります

結果は以下の通りであります：

あなたは英語でラベルを付ける場合は、英語が自動的にラップされていないので、あなたは彼が次のコードを追加してみましょうラップする必要があります。

ワードラップ：ブレークワード; 
単語ブレーク：ブレークのすべて;

もちろん、あなたがプラグclamp.jsを使用することができます