-webkit-line-clamp
-webkit-line-clamp
CSS プロパティは block container のコンテンツを指定した行数に制限することができます。
display
プロパティに -webkit-box
もしくは -webkit-inline-box
が設定されており、かつ -webkit-box-orient
プロパティに vertical
が設定されている組み合わせのときのみ使用できます。
ほとんどの場合、 overflow
に hidden
を設定できます。そうしなければコンテンツはクリップされませんが、省略記号は指定した行数の後に表示されます。
アンカー要素に適用したとき、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。
メモ: このプロパティは元々WebKitブラウザでは実装されていますが、いくつかの問題があります。レガシーサポートのために標準化されました。CSS Overflow Module Level 3 の仕様では、このプロパティを置き換えて問題を回避することを目的として line-clamp
プロパティが定義されています。
文法
/* Keyword value */
-webkit-line-clamp: none;
/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;
/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
none
- コンテンツの行数を制限しません。
integer
- コンテンツを制限する行数を指定します。0より大きい値でなければなりません。
例
HTML
<p>
In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
An ellipsis will be shown at the point where the text is clamped.
</p>
CSS
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
Result
仕様書
Specification | Status | Comment |
---|---|---|
CSS Overflow Module Level 3 -webkit-line-clamp の定義 |
草案 | Initial definition |
初期値 | none |
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 計算値の型による |
ブラウザ互換性
BCD tables only load in the browser