あなたは、単一の行のテキスト表示オーバーフロー省略記号学生は、テキストオーバーフローによって知るべきで実装する場合：省略記号のプロパティを、もちろん、また、ブラウザの互換性の一部である幅に幅を追加する必要があります。
方法：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;効果はのようになります。
我々はまだ複数行のテキスト表示オーバーフロー省略記号を達成するためにしている場合は、このプロパティは、シングルラインテキスト表示オーバーフロー省略記号をサポートしています。
その後、次のように複数行のテキスト表示オーバーフロー省略記号に焦点について話しています。
方法：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;効果はのようになります。
スコープ：
拡張属性の使用は、方法は、WebKitのブラウザ及びモバイル端末にも適用可能であるCSSを、WebKitの。
注意：
- 行の数は、要素が表示されたテキストを制限するためのブロック線クランプ-webkit。この効果を達成するためには、他のプロパティのWebKitの組み合わせを必要とします。属性の一般的な組み合わせ：
- 表示：-webkit-boxが、弾性的に伸縮オブジェクトモデルの表示欄として、プロパティを結合しています。
- -webkit-ボックス向ける必要結合特性、セットまたはオブジェクトのサブエレメントカセットの伸縮構成を取得します。
方法：
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}図影響：
範囲：
広い範囲のための方法が、ケースは、省略記号が表示されるテキストの行を超えていない、最適化方法は、JSを組み合わせることができます。
注意：
- 高さは、余分な文字が露出防止、行の高さの整数倍に設定されています。
- Pに::避けるテキストにグラデーションの背景を追加した後だけ半分を示しています。
- コンテンツはie6-7コンテンツを表示されていないので、そうie6-7互換性のタグを追加する（例：<スパン> ... <スパン/>）;交換する::の後に互換性IE8の必要性：後。
