概要
-webkit-line-clamp プロパティは、ブロック内のコンテンツを指定した行数に切り詰めて表示する際に使用します。
ただし、以下のプロパティを組み合わせないと、有効に機能しません。
- 【必須】 display プロパティに、”-webkit-box” もしくは “-webkit-inline-box”が指定されている。
- 【必須】 -webkit-box-orient プロパティに “vertical” に設定されている。
- overflow プロパティに “hidden” が指定されている。
なお、Internet Exploreは対応していません。
仕様
| 初期値 | none |
| 適用対象 | 全ての要素 |
| 継承 | なし |
| 計算値 | 指定値 |
| アニメーションの種類 | by computed value type |
指定できる値
- none （初期値）
- コンテンツの行数を限定しません。
- <integer>
- 0より大きい正の整数が指定でき、指定した行数でコンテンツを切り詰めます。
サンプル
See the Pen -webkit-line-clamp by Masahiko Iwakiri (@m-iwakiri) on CodePen.
このサイトでは、CSSのセレクタ・プロパティなどの定義は下記サイトを参考にしています。
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
コメント