CSSbreak-after プロパティは、生成されたボックスの後で、ページ、段、領域をどのように区切るかを定義します。ボックスが生成されない場合は、このプロパティは無視されます。

/* 全般的な区切り値 */
break-after: auto;
break-after: avoid;

/* 改ページ値 */
break-after: avoid-page;
break-after: page;
break-after: always;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;

/* 段区切り値 */
break-after: avoid-column;
break-after: column;

/* 領域区切り値 */
break-after: avoid-region;
break-after: region;

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

区切り位置になる可能性のある場所 (言い換えれば、要素の境界) は、三つのプロパティに影響されます。前の要素の break-after の値、次の要素の break-before の値、包含要素の break-inside の値です。

区切られるかどうかを判断するために、以下の規則が適用されます。

  1. 考慮される三つの値の中の何れかに区切りを強制する値 (always, left, right, page, column, region の何れか) がある場合、それが優先されます。そのような区切りが複数ある場合は、フローの中で最も後に現れる要素のものが使用されます (つまり、 break-before の値は break-after の値より優先し、それは更に break-inside よりも優先します)。
  2. 考慮される三つの値の中に区切りを防止する値 (avoid, avoid-page, avoid-region, avoid-column の何れか) が含まれていた場合は、その場所で区切りは適用されません。

強制的な区切りが適用されると、必要に応じてソフトな区切りが追加される場合がありますが、 avoid に関する値に解決される要素の境界には追加されません。

初期値auto
適用対象ブロックレベル要素
継承不可
メディアpaged
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

全般的な区切り値

auto
該当するボックスの直後に何らかの (ページ、段、領域の) 区切りを挿入することを許可しますが、強制はしません。
avoid
該当するボックスの直後に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。

改ページ値

avoid-page
該当するボックスの直後の改ページを禁止します。
page
該当するボックスの直後で改ページを行います。
always
該当するボックスの直後で改ページを行います。 (これは page の別名であり、このプロパティのサブセットであった page-break-after からの移行がしやすいように残されています。)
left
該当するボックスの直後で一つ又は二つの改ページを行い、次のページが左ページになるようにします。
right
該当するボックスの直後で一つ又は二つの改ページを行い、次のページが右ページになるようにします。
recto
該当するボックスの直後で一つ又は二つの改ページを行い、次のページが奇数ページになるようにします。 (奇数ページは左から右に開く場合は右ページになり、右から左に開く場合は左ページになります。)
verso
該当するボックスの直後で一つ又は二つの改ページを行い、次のページが偶数ページになるようにします。 (奇数ページは左から右に開く場合は左ページになり、右から左に開く場合は右ページになります。)

段区切り値

avoid-column
該当するボックスの直後の段区切りを禁止します。
column
該当するボックスの直後で段区切りを行います。

領域区切り値

avoid-region
該当するボックスの直後の領域区切りを禁止します。
region
該当するボックスの直後で領域区切りを行います。

形式文法

auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region

仕様書

仕様書 策定状況 コメント
CSS Fragmentation Module Level 3
break-after の定義
勧告候補 recto 及び verso キーワードを追加。このプロパティのメディア種別を paged から visual に変更。異なる種類の区切りを持つ区切りアルゴリズムを定義した。
CSS Regions Module Level 1
break-after の定義
草案 領域区切りを扱うようにプロパティを拡張した。 avoid-region 及び region キーワードを追加した。
CSS Multi-column Layout Module
break-after の定義
草案 初回定義。 CSS 2.1 の page-break-after プロパティを拡張し、ページ区切りと段区切りの両方を扱うようにした。

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応5012 なし10

37

11.1 — 12.1

10
column and avoid-column なし なし なし1011.1 — 12.1 なし
recto and verso なし なし なし なし なし なし
region and avoid-region なし なし なし なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5050 あり なし ?105.0
column and avoid-column なし ? なし なし ? なし なし
recto and verso なし ? なし なし なし なし なし
region and avoid-region なし ? なし なし なし なし なし

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

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