CSSプロパティbox-lines：複数行要素の改行時の動作を制御する
box-lines プロパティは、複数行要素の改行時の動作を制御するCSSのプロパティです。要素の内容が複数行にわたる場合に、どの行をまとめて保持し、どの行を分割できるかを指定できます。
この属性は現在実験段階にあり、広くサポートされていません。
目次
構文と値
- 構文:
box-lines: single | multiple; - 値:
single: すべての行をまとめて保持します。すべての行を収めるのに十分なスペースがない場合は、要素は次の行に表示されます。multiple: 要素の行を異なる行ボックスに表示できます。
- デフォルト値:
multiple
ブラウザの互換性
box-lines プロパティは、ブラウザの互換性が低く、現在サポートしているブラウザはごくわずかです。
| ブラウザ | バージョン |
|---|---|
| Chrome | 84+ (実験的フラグ付き) |
| Edge | 84+ (実験的フラグ付き) |
| Firefox | 未サポート |
| Safari | 未サポート |
最新のブラウザ互換性情報は、Can I use を参照してください。
使用例
シナリオ1：すべての行をまとめる
- シナリオ：見出し要素があり、すべてのテキストを同じ行に保持し、スペースが足りない場合は改行して表示したい場合。
- HTMLコード例:
<h1 class="single-line">これは複数行にわたる可能性のある長い見出しテキストです。</h1>
- CSSコード例:
.single-line {
box-lines: single;
}
- 表示効果：見出しのテキストは、すべて1行に表示されるか、すべて改行して表示されます。
シナリオ2：行の分割を許可する
- シナリオ：段落要素があり、テキストが異なる行ボックスに表示されるようにしたい場合。
- HTMLコード例:
<p>これは、異なる行ボックスに表示できる複数行のテキストを含む段落です。</p>
- CSSコード例:
box-lines: multiple;を使用するか、このプロパティを設定しません。 - 表示効果：段落のテキストは、スペースが足りない場合に自動的に改行され、異なる行のテキストは異なる行ボックスに表示されます。
関連属性
line-break: 行テキストの改行方法を制御します。word-break: 単語の改行方法を制御します。hyphens: 単語をハイフンで連結するかどうか、および連結方法を制御します。
これらの属性の詳細については、MDN Web Docs を参照してください。
よくある質問
1. box-lines プロパティはすべてのブラウザでサポートされていますか？
いいえ、box-lines プロパティはまだ実験段階であり、すべてのブラウザでサポートされているわけではありません。最新の情報については、Can I use を参照してください。
2. box-lines プロパティを使用する利点は何ですか？
box-lines プロパティを使用すると、複数行要素の改行をより細かく制御できます。これにより、テキストのレイアウトを改善し、より読みやすく魅力的なデザインを作成できます。
3. box-lines プロパティと line-break プロパティの違いは何ですか？
box-lines プロパティは、行ボックスレベルで改行を制御するのに対し、line-break プロパティは、行テキストレベルで改行を制御します。
注: box-lines プロパティは現在実験段階にあり、今後変更される可能性があります。そのため、本番環境では慎重に使用してください。