--- 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 ---
-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
{{CSSInfo}}
<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>
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}}