これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSSbox-decoration-break プロパティは、要素の断片が複数の行、段、ページに渡る場合に描画する方法を指定します。

指定された値は、次のプロパティの表示方法に影響を与えます。

構文

/* キーワード値 */
box-decoration-break: slice;
box-decoration-break: clone;

/* グローバル値 */
box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: unset;

box-decoration-break プロパティは、以下の一覧にあるキーワード値の一つで指定します。

slice
要素は最初、ボックスが断片化していないかのように描画され、その後でこの仮想ボックスに描画されたものが、それぞれの行/段/ページのための断片に分割されます。なお、仮想ボックスはインライン方向に分割された場合には独自の高さを使用し、ブロック方向に分割された場合は独自の幅を使用するため、それぞれの断片ごとに異なる場合があることに注意してください。詳しくは CSS の仕様書を参照してください。
clone
それぞれの断片が、それぞれの断片を囲む指定された境界、パディング、マージンを伴って個別に描画されます。 border-radius, border-image, box-shadow はそれぞれの断片に個別に適用されます。背景もそれぞれの断片で個別に描画されます。つまり、 background-repeat: no-repeat がついた背景画像であっても、複数回繰り返されます。

形式文法

slice | clone

インラインボックスの断片化

改行を含むインライン要素は次のように整形されます。

.example { 
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow:
    8px 8px 10px 0px deeppink, 
    -5px -5px 5px 0px blue, 
    5px 5px 15px 0px yellow;
  padding: 0em 1em;
  border-radius: 16px;
  border-style: solid;
  margin-left: 10px;
  font: 24px sans-serif;
  line-height: 2;
}

...
<span class="example">The<br>quick<br>orange fox</span>

... 結果は以下のようになります。

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

上記のスタイルに box-decoration-break: clone を追加すると、

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

... 以下のような結果になります。

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

ブラウザーで上記の二つのインラインの例を試してみることができます。

これはインライン要素に大きな border-radius の値を使用した例です。二番目の "iM" には、 "i""M" の間に改行があります。それに対して、最初の "iM" には改行がありません。なお、2つの断片の描画結果を水平に並べると、断片化されていない描画結果と同じになります。

A screenshot of the rendering of the second inline element example.

ブラウザーで上の例を試してみることができます。

ブロックボックスの断片化

上記と同様のスタイルのブロックボックスは、断片化がないと次のような結果になります。

A screenshot of the rendering of the block element used in the examples without any fragmentation.

上記のブロックが三つの段に分割されると、次のような結果になります。

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

なお、これらの断片を縦に並べると、断片化されていない描画結果と同じになります。

そして、同じ例を box-decoration-break: clone で整形すると、次のような結果になります。

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

なお、それぞれの断片に同じ境界線、ボックスの影、背景が複製されます。

ブラウザーで上の例を試してみることができます。

仕様書

仕様書 状態 備考
CSS Fragmentation Module Level 3
box-decoration-break の定義
勧告候補 初回定義。

初期値slice
適用対象全要素
継承なし
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応22 -webkit- 1 なし

32

あり — 322

なし

15 -webkit-

11.5 — 15

6.11
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり14.4 -webkit- 1 ?

32

あり — 322

15 -webkit-

11.5 — 15

7.11 あり

1. This property is only supported for inline elements.

2. Supported as -moz-background-inline-policy.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, teoli
最終更新者: mfuji09,