page-break-before

警告: このプロパティは break-before プロパティによって置き換えられました。

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

このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の <div> には適用されません。

css
/* キーワード値 */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

/* グローバル値 */
page-break-before: inherit;
page-break-before: initial;
page-break-before: revert;
page-break-before: unset;

試してみましょう

構文

auto

初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。

always

要素の前で必ず改ページが行われるように強制します。

avoid

要素の前で改ページされないようにします。

left

要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。

要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。

recto Experimental

左から右に読むページにおいて right と同じ動作をします。右から左に読むページであれば left と同じ働きをします。

verso Experimental

左から右に読むページにおいて left と同じ動作をします。右から左に読むページであれば right と同じ働きをします。

改ページの別名

page-break-before プロパティは古いプロパティとなり、 break-before によって置き換えられました。

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

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

公式定義

初期値auto
適用対象ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素に table-row 要素のように適用することがあります。
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

page-break-before = 
auto |
always |
avoid |
left |
right |
inherit

ある要素の前で改ページを防ぐ

css
/* div の前で改ページされないようにします */
div.note {
  page-break-before: avoid;
}

仕様書

Specification
CSS Logical Properties and Values Level 1
# page
CSS Paged Media Module Level 3
# page-break-before
CSS Fragmentation Module Level 3
# page-break-properties

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
page-break-before
Deprecated
always
Deprecated
auto
Deprecated
avoid
Deprecated
left
Deprecated
right
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
See implementation notes.

関連情報