box-decoration-breakで左右両端を揃えてみる

公開日: 2019/08/21

カテゴリ: CSS

CSSのリファレンスを見てたら、興味深いプロパティがあったので紹介します。CSSで左右marginを指定したインライン要素が改行された際に両端を揃える覚え書きです。背景色・枠線・影なども適用されます。

サンプル

box-decoration-block: clone;を適用した場合

サンプルテキストサンプルテキストサンプルテキストサンプルテキスト

何も指定しない場合

サンプルテキストサンプルテキストサンプルテキストサンプルテキスト

コード

<div class="box">
<p><span class="clone">サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</span></p>
</div>

.box {
	width: 200px;
	border: 1px solid #ccc;
	padding: 8px 0;
}
.clone {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	margin: 0 10px;
	background-color: #00f;
}

このサンプルを見てるだけではあまり有用性は見い出せないかもしれませんが、例えばタイトルなどの<h1>タグ内に<a>タグを使用したときなどに使えるかもしれません。使えるのか…？

ただし、まだWebkit系ではベンダープレフィックスが必要なため、本環境で使用することは少し待ったほうが良いかもしれません。また、環境によっては文字がはみ出るなど別の問題を引き起こす可能性があります。

参考リンク

box-decoration-break - CSS: カスケーディングスタイルシート | MDN

2019/08/21