Box-decoration-break プロパティ（Chrome 130）

Rachel Andrew

公開日: 2024 年 10 月 11 日

Chrome 130 では、値が clone の box-decoration-break CSS プロパティが使用可能になり、インラインとブロックのフラグメンテーションがサポートされます。この投稿では、その理由と使用方法について説明します。

インラインの断片化

インライン フラグメンテーションとは、インライン要素（テキスト文字列など）が複数行にわたって分割されることです。インライン要素にはボックスがありますが、要素に背景や枠線を追加しようとしない限り、通常は意識する必要はありません。次の例では、border-radius を含む背景が span に追加されます。文字列の先頭と末尾でのみ境界線が曲線になっています。

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

box-decoration-break の初期値は slice で、ボックスにスライス効果が適用されます。新たにサポートされた box-decoration-break: clone では、各行の先頭と末尾が丸い枠線で囲まれます。

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}