複数行のテキストに余白のある背景色をつける


複数行にわたるインライン要素のテキストに余白付きの背景をつけると起きる問題

アイキャッチのようなデザイン、見ませんか?
今回はこのようなデザインをcssで再現する方法をご紹介します。

テキスト要素に背景をつけるとき、spanタグなどのインライン要素で付ける場合が多いと思いますが
インライン要素にpaddingを設定して背景色をつけて改行すると2行目以降にpaddingが効きません。

ブロック要素に背景を付けるとマーカーのようにテキストの後ろにのみ背景がつかないし…

インライン要素で余白ありの複数行を実現する場合
今までは、インラインブロック要素にして改行ごとにspanタグで囲んでいました。
が、これでは効率が悪いし改行位置が不確定の場合
デバイスによって意図しない位置で改行されてしまう場合もあります。

そんなときに使えるのがcssプロパティのbox-decoration-breakです。

box-decoration-break: clone;の活用

box-decoration-breakは、要素の線、余白、背景が
改行や折り返しの際にどのように処理されるかを指定するために使用されます。
特に、要素が複数行にまたがる場合や、段落が分割される場合に役立ちます。

今回使用するのは、box-decoration-break: clone;です。
cloneはボックスの断片が一体化して処理されます。
背景やボーダーが行でシームレスに続いているように見え、各行が一つの連続した要素のように見えます。

デモとコード

See the Pen
Untitled
by webmoyou (@yydliugt-the-animator)
on CodePen.

背景画像を設定した箇所がわかりやすいですが、
行の開始から改行位置までで一つの要素になります。

対応ブラウザについて

https://caniuse.com/css-boxdecorationbreak

ベンダープレフィックス-webkit-が必要なブラウザが多いので
つけて書いた方が吉です。

まとめ

box-decoration-break: clone;を使うことで、
インライン要素に背景色と余白を適用し、複数行にわたる見た目の一貫性を保つことができます。
ぜひ試してみてください!

ABOUTこの記事を書いた人

  • mm
  • Editor: うぇぶもようの中の人