【折り返しOK】box-decoration-breakで行に背景や線を綺麗につける

2025.12.05 2025.12.05

※本ブログの目的は個人の備忘録であり、コードは参考用として掲載しています。
実際に使用される際は、ご自身の環境で十分に動作確認を行ってください。
コードの利用によって生じたいかなる問題についても責任を負いかねますので、あらかじめご了承ください。

はじめに

キャッチコピーや強調部分で、複数行にわたってマーカー風の背景色・背景グラデーション・ボーダー装飾を綺麗に適用したい場面があります。

しかし、普通のbackgroundやtext-decorationだけでは行ごとに綺麗に揃わず、途中で途切れてしまうことがあります。

そんなときに便利なのがbox-decoration-breakです。

box-decoration-breakとは

box-decoration-break は、要素が複数行に分かれたときの

背景（background）
枠線（border）
padding（余白）

を1行ずつどう扱うかを指定できる CSS プロパティです。

値は2種類あり、今回使うのは clone です。

値	説明
slice（初期値）	行が折り返されたとき、背景や枠線は 1つのボックスとして扱われる（途中で途切れる）
clone	行ごとに背景・枠線・padding が“複製”される（綺麗に繋がる）

Safari 対策として -webkit- は必須

Safari は未だに接頭辞が必要なため、この2行をセットで書くのが基本 です。

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

box-decoration-break: clone の実装例

実際に確認したほうが早いと思いますので、参考にデモページをご用意しました。

背景グラデーション

1行ごとにグラデーションの背景をつける例です。

<p>
  <span class="highlight">
    複数行にわたるテキストでも、行ごとに背景が途切れずにきれいに適用されます。
  </span>
</p>

.highlight {
  background: linear-gradient(
    135deg,
    rgba(255, 180, 150, 0.45) 10%,
    rgba(255, 220, 180, 0.45) 80%
  );
  padding: 4px 8px;
  line-height: 2;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

もちろんpaddingやbackgroundの指定はデザインに合わせていただければ大丈夫です。

マーカー風デザイン

定番のマーカーで引いたようなデザインもcloneと相性が抜群です。

<p>
  <span class="marker">
    インラインのマーカー風ハイライトも複数行に渡って自然に表示できます。
  </span>
</p>

.marker {
  background: linear-gradient(
    to bottom,
    transparent 60%,
    rgba(255, 247, 0, 0.7) 60%
  );
  padding: 2px 4px;
  line-height: 2;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

cloneのポイント（行ごとに複製される）

box-decoration-break: cloneを使うと、行が折り返された際に

左右の padding
上下の padding
背景（色・グラデーション）
border（枠線）

が行ごとに複製されるため、複数行でもマーカー風の見た目を自然に維持できます。

単にspanに背景をつけただけでは、paddingが行頭と行末にしか反映されず、テキストの位置が行ごとにズレてしまいます。

cloneを使うことで、その問題を解消できます。

注意点：inline 要素でのみ効果を発揮

box-decoration-break はインライン要素（例：span）に対して使うことが前提のプロパティです。

下記のようにdisplay: blockや inline-blockを指定すると、思うように動作しないかと思います。

.marker {
  display: inline-block; /* NG */
}

実装時のおすすめ構造

<p class="wrapper">
  <span class="marker">複数行にまたがる強調テキストです。</span>
</p>

さらに、文章量が多い場合は

.wrapper {
  text-align: justify; /* 両端揃えで、行の長さが安定する */
}

を付けると見た目がより整います。

まとめ

box-decoration-break: clone を使うと、以下のような装飾を 複数行でも美しく表示 できます。

マーカー風ハイライト
背景グラデーションの強調文
キャッチコピー用の背景帯
行ごとに枠を付けるデザイン

特に、テキストのデザイン性を高めたい時には必須レベル のプロパティです。

CSSで細部までこだわりたい場合は、ぜひ活用してみてください。

参考

box-decoration-break - CSS | MDN