このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 を設定できます。そうしなければ内容は切り取られませんが、省略記号は指定した行数の後に表示されます。
アンカー要素に適用すると、切り捨てがテキストの途中で行われる場合があるかもしれませんが、必ずしも末尾で切り捨てが行われるとは限りません。
構文
css
/* キーワード値 */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'>]-webkit-legacy?
<integer> =
<number-token>
<block-ellipsis> =
no-ellipsis|
auto|
<string>
例
段落の切り捨て
HTML
html
<p> この例では、 <code>-webkit-line-clamp</code> プロパティを 3 に設定すると、テキストは 3 行目の後で切られます。テキストが切られた点には省略記号が表示されます。</p>CSS
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 |