-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
適用対象すべての要素
継承なし
計算値指定値
アニメーションの種類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 完全対応 1.0

凡例

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

関連情報