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

/* 一般の区切り値 */
break-after: auto;
break-after: avoid;
break-after: always;
break-after: all;

/* 改ページ値 */
break-after: avoid-page;
break-after: page;
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
該当するボックスの直後に何らかの (ページ、段、領域の) 区切りを挿入することを禁止します。
always 
該当するボックスの直後で強制的に改ページを行います。この区切りの種類は断片化のコンテキストを直接含むものです。段組みコンテナーの中であれば強制的な段区切りとなり、ページ付きメディアの (ただし段組みコンテナーの中ではない) 場合はページ区切りになります。
all 
該当するボックスの直後で強制的に改ページを行います。すべての分断しうるコンテキストを通して区切ります。よって、段組みコンテナーの中での区切りは、ページコンテナーの中であれば強制的に段組みとページを区切ります。

改ページ値

avoid-page
該当するボックスの直後の改ページを禁止します。
page
該当するボックスの直後で改ページを行います。
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

改ページの別名

互換性のため、古い page-break-after はブラウザーから break-after の別名として扱われます。これにより、 page-break-after を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。

page-break-after break-after
auto auto
left left
right right
avoid avoid
always page

ブラウザーにおいては always の値は page-break-* において、段区切りではなくページ区切りとして実装されています。したがって、 Level 4 の仕様書では always の値ではなく page の別名となっています。

仕様書

仕様書 状態 備考
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 プロパティを拡張し、ページ区切りと段区切りの両方を扱うようにした。

ブラウザーの対応

段組みレイアウトでの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 50Edge 完全対応 12Firefox 未対応 なしIE 完全対応 10Opera 完全対応 37
完全対応 37
未対応 11.1 — 12.1
Safari 未対応 なしWebView Android 完全対応 50Chrome Android 完全対応 50Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 5.0
columnChrome 完全対応 50Edge 完全対応 12Firefox 未対応 なしIE 完全対応 10Opera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android ?
avoid-columnChrome 未対応 なしEdge 完全対応 12Firefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 ありWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 ありSamsung Internet Android 未対応 なし
alwaysChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

ページ化メディアでの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 50Edge 完全対応 12Firefox 完全対応 65IE 完全対応 10Opera 完全対応 37
完全対応 37
未対応 11.1 — 12.1
Safari 完全対応 10WebView Android 完全対応 50Chrome Android 完全対応 50Edge Mobile 完全対応 ありFirefox Android 完全対応 65Opera Android ? Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
page and avoid-pageChrome 完全対応 50Edge 完全対応 12Firefox 完全対応 65IE 完全対応 10Opera 未対応 11.1 — 12.1Safari ? WebView Android 完全対応 50Chrome Android 完全対応 50Edge Mobile 完全対応 12Firefox Android 完全対応 65Opera Android ? Safari iOS ? Samsung Internet Android ?
alwaysChrome 未対応 なしEdge 完全対応 12Firefox 未対応 なしIE 完全対応 10Opera 未対応 11.1 — 12.1Safari ? WebView Android 完全対応 50Chrome Android 未対応 なしEdge Mobile 完全対応 12Firefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android ?
recto and verso
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

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

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