-webkit-line-clamp

-webkit-line-clamp CSS プロパティは block container のコンテンツを指定した行数に制限することができます。

display プロパティに -webkit-box もしくは -webkit-inline-box が設定されており、かつ -webkit-box-orient プロパティに vertical が設定されている組み合わせのときのみ使用できます。

ほとんどの場合、 overflow に hidden を設定できます。そうしなければコンテンツはクリップされませんが、省略記号は指定した行数の後に表示されます。

アンカー要素に適用したとき、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。

Note: This property was originally implemented in WebKit and has some issues. It got standardized for legacy support. The CSS Overflow Module Level 3 specification also defines a line-clamp property, which is meant to replace this property and avoid its issues.

文法

/* 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
This value specifies that the content wonʼt be clamped.
integer
This value specifies the number of lines after which the content will be clamped. It must be greater than 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
適用対象すべての要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類by computed value type
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
-webkit-line-clampChrome 完全対応 6Edge 完全対応 17Firefox 完全対応 68IE 未対応 なしOpera 完全対応 15Safari 完全対応 5WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 68Opera Android 完全対応 14Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報