くまだどうも、くまだです。
box-decoration-breakプロパティについて。
box-decoration-breakプロパティ
box-decoration-breakはボックスが改行する際の表示形式を指定するプロパティです。
box-decoration-breakはsliceとcloneの二つの値があります。
使うケースだと、テキストに背景色が付いていて、テキスト量に応じて背景色も追従するような場合です。
<p class="text">テキストてきすとテキストてきすとテキストてきすとテキストてきすと<br>
テキストてきすとテキストてきすと</p>
.text {
font-size: 24px;
background-color: orange;
display: inline;
padding: 10px;
line-height: 2;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
テキスト量や行数、折り返し位置も不確定な場合など使えそうな印象です。よくテキストをspanタグで囲って～という手法がありますが、この場合はspanタグを入れ込まなくてもできます。
テキストはブロック要素ではなくインライン要素にします。
仮にbox-decoration-breakを使わずに折り返すと以下のような表示なります。背景色じゃなくてborderにしましたが、このほうがわかりやすかもしれません。
.text {
font-size: 24px;
display: inline;
padding: 10px;
line-height: 2.8;
border: 1px solid black;
}
折り返し位置で線が切れてしまいます。画面幅によっては折り返し位置も変わるので、切れてしまう位置も変わってしまいます。
ここでbox-decoration-breakを使うと、以下のような表示になります。
.text {
font-size: 24px;
display: inline;
padding: 10px;
line-height: 2.8;
border: 1px solid black;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
画面幅に応じてテキストが折り返されても、違和感ない表示になります。
ここまで読んでくださりありがとうございました。