表示領域の制御（複数行に対する文章の省略） line clamp

表示領域の制御について

複数行のテキストで要素より超えたテキストを非表示にして省略記号または任意の文字列を代わりに表示する場合は、line-clampプロパティを使用します。

• ※ webkitの独自実装です。
• ※ line-clampプロパティを使用する場合は、縦並びのフレキシブル・レイアウトである必要があります。
  フレキシブル・レイアウトについて

【構文】

							line-clamp:行数;
						

サンプルコード

div.sample { display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; /* -webkit-box-orientvertical; */ -webkit-box-direction:column; -moz-box-direction:column; -webkit-flex-direction:column; -moz-flex-direction:column; flex-direction:column; -webkit-line-clamp:3; }