page-break-before CSS プロパティは、現在の要素の前で 改ページが行われるように調整します。
このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の <div> には適用されません。
/* キーワード値 */ 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: unset;
注: このプロパティは現在、より包括的な break-before に置き換えられつつあります。新しいプロパティによって、カラムや領域の境界も扱えるようになり、page-break-before と構文上の互換性を持っています。
page-break-before を使う前に、break-before で代用できるか確認してください。将来、page-break-before は単なるエイリアスになると思われます。
| 初期値 | 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. |
| 継承 | なし |
| メディア | 一括指定の各プロパティとして |
| 計算値 | 指定値 |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
値
auto- 初期値です。 自動的な改ページが行われます（強制や禁止の機能は持ちません）。
always- 要素の前で必ず改ページが行われるように強制します。
avoid- 要素の前で改ページされないようにします。
left- 要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。
right- 要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。
recto- 左から右に読むページにおいて
rightと同じ動作をします。右から左に読むページであればleftと同じ働きをします。 verso- 左から右に読むページにおいて
leftと同じ動作をします。右から左に読むページであればrightと同じ働きをします。
形式的構文
auto | always | avoid | left | right | recto | verso
例
/* div の前で改ページされないようにします */
div.note {
page-break-before: avoid;
}
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Logical Properties and Values Level 1 recto and verso の定義 |
編集者草案 | recto と verso の追加 |
| CSS Paged Media Module Level 3 page-break-before の定義 |
草案 | プロパティが適用される要素を table rows と table row groups に拡張 |
| CSS Level 2 (Revision 1) page-break-before の定義 |
勧告 | 初期定義 |
ブラウザー実装状況
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet | |
| 基本対応 | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox
完全対応
1
| IE 完全対応 4 | Opera 完全対応 7 | Safari 完全対応 1.2 | WebView Android ? | Chrome Android ? | Edge Mobile 完全対応 あり | Firefox Android
完全対応
4
| Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 実装状況不明
- 実装状況不明
- 実装ノートを参照してください。
- 実装ノートを参照してください。