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

/* キーワード値 */
break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;

/* グローバル値 */
break-inside: inherit;
break-inside: initial;
break-inside: 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-inside プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

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

形式文法

auto | avoid | avoid-page | avoid-column | avoid-region

仕様書

仕様書 策定状況 コメント
CSS Fragmentation Module Level 3
break-inside の定義
勧告候補 変更なし。
CSS Regions Module Level 1
break-inside の定義
草案 領域区切りを扱うようにプロパティを拡張した。
CSS Multi-column Layout Module
break-inside の定義
草案 初回定義。

ブラウザーの対応

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 完全対応 10WebView Android 完全対応 50Chrome Android 完全対応 50Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android ? Safari iOS 完全対応 10Samsung Internet Android 完全対応 5.0
column and avoid-columnChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 完全対応 10Opera 未対応 11.1 — 12.1Safari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile 未対応 なしFirefox 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 未対応 なし
region and avoid-region
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android ? Edge Mobile 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

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

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

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