--- title: '-webkit-line-clamp' slug: Web/CSS/-webkit-line-clamp tags: - '-webkit-line-clamp' - CSS - CSS Property - Non-standard - recipe:css-property browser-compat: css.properties.-webkit-line-clamp translation_of: Web/CSS/-webkit-line-clamp ---
{{CSSRef}}

-webkit-line-clamp は CSS のプロパティで、{{Glossary("block container", "ブロックコンテナー")}}のコンテンツを指定した行数に制限することができます。

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

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

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

メモ: このプロパティは元々 WebKit ブラウザでは実装されていますが、いくつかの問題があります。レガシーサポートのために標準化されました。 CSS Overflow Module Level 3 の仕様では、このプロパティを置き換えて問題を回避することを目的として {{cssxref("line-clamp")}} プロパティが定義されています。

構文

/* キーワード値 */
-webkit-line-clamp: none;

/* <integer> 値 */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* グローバル値 */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
none
コンテンツの行数を制限しません。
{{cssxref("integer")}}
コンテンツを制限する行数を指定します。 0 より大きい値でなければなりません。

公式定義

{{CSSInfo}}

形式文法

{{CSSSyntax}}

段落の切り捨て

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;
}

結果

{{EmbedLiveSample("Truncating_a_paragraph", "100%", "100")}}

仕様書

仕様書 状態 備考
{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}} {{Spec2("CSS3 Overflow")}} 初回定義

ブラウザーの互換性

{{Compat}}

関連情報