We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

page-break-inside CSS プロパティは、現在の要素の内側で 改ページが行われるように調整します。

初期値auto
適用対象block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
継承不可
メディアvisual, paged
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* Keyword values */
page-break-inside: auto;
page-break-inside: avoid;

/* Global values */
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: unset;

auto
初期値です。 自動的な改ページが行われます(強制や禁止の機能は持ちません)。
avoid
要素の内側で改ページされないようにします。

形式構文

auto | avoid

/* 段落の途中で改ページされないようにします */
p { page-break-inside: avoid;  } 

仕様

仕様書 状況 備考
CSS Paged Media Module Level 3
page-break-inside の定義
草案 より多くの要素に適用できるように拡張
CSS Level 2 (Revision 1)
page-break-inside の定義
勧告 最初の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 19 (19) [1] 8.0 7.0 1.3 (312)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? 19.0 (19) [1] ? ? ?

[1] Firefox 25 以前は、ブロックの高さによって page-break-inside: avoid が適用されませんでした。

参考情報

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

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