line-clamp
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
line-clamp
は CSS のプロパティで、ブロックのコンテンツを指定した行数に制限することができます。
メモ:
過去のブラウザーとの互換性のため、ベンダー接頭辞の付いた -webkit-line-clamp
プロパティは、 display
プロパティに -webkit-box
もしくは -webkit-inline-box
が設定されており、かつ -webkit-box-orient
プロパティに vertical
が設定されている組み合わせのときのみ使用できます。これらは非推奨のプロパティですが、これら 3 つのプロパティの共依存性は完全に仕様化された動作であり、今後も対応していきます。
ほとんどの場合、 overflow
に hidden
を設定できます。そうしなければ内容は切り取られませんが、省略記号は指定した行数の後に表示されます。
アンカー要素に適用すると、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。
構文
/* キーワード値 */
line-clamp: none;
/* <integer> 値 */
line-clamp: 3;
line-clamp: 10;
/* グローバル値 */
line-clamp: inherit;
line-clamp: initial;
line-clamp: revert;
line-clamp: revert-layer;
line-clamp: unset;
値
公式定義
初期値 | none |
---|---|
適用対象 | 段組みコンテナーを除くブロックコンテナー |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | integer |
形式文法
line-clamp =
none |
<integer [1,∞]> || <'block-ellipsis'>
<block-ellipsis> =
none |
auto |
<string>
例
段落の切り捨て
HTML
<p>
この例では、 <code>-webkit-line-clamp</code> プロパティを 3 に設定すると、テキストは 3 行目の後で切られます。テキストが切られた点には省略記号が表示されます。
</p>
CSS
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
結果
仕様書
Specification |
---|
CSS Overflow Module Level 4 # propdef-line-clamp |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
line-clamp | ||||||||||||
none |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.