Page break aliases
警告: このプロパティは break-after プロパティで置き換えられました。
page-break-after は CSS のプロパティで、現在の要素の後で改ページが行われるように調整します。
css
/* キーワード値 */ page-break-after: auto; page-break-after: always; page-break-after: avoid; page-break-after: left; page-break-after: right; page-break-after: recto; page-break-after: verso;
/* グローバル値 */ page-break-after: inherit; page-break-after: initial; page-break-after: revert; page-break-after: unset;
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
page-break-after 非推奨 | 1 | 12 | 1 | 1.2 | 18 | 1 |
always 非推奨 | 1 | 12 | 1 | 1.2 | 18 | 1 |
auto 非推奨 | 1 | 12 | 1 | 1.2 | 18 | 1 |
avoid 非推奨 | 1 | 12 | | | 18 | |
left 非推奨 | 1 | 12 | 1 | 1.2 | 18 | 1 |
right 非推奨 | 1 | 12 | 1 | 1.2 | 18 | 1 |
| その他 | ||||||
| page-break-before CSS プロパティは、現在の要素の前で改ページが行われるように調整します。 | 1 | 12 | 1 | 1.2 | 18 | 1 |
| CSS プロパティ | ||||||
always 非推奨 | 1 | 12 | 1 | 1.2 | 18 | 1 |
auto 非推奨 | 1 | 12 | 1 | 1.2 | 18 | 1 |
avoid 非推奨 | 1 | 12 | | | 18 | |
left 非推奨 | 1 | 12 | 1 | 1.2 | 18 | 1 |
right 非推奨 | 1 | 12 | 1 | 1.2 | 18 | 1 |
| その他 | ||||||
| CSS の page-break-inside プロパティは、現在の要素の内側の 改ページを調整します。 | 1 | 12 | 19 | 1.3 | 18 | 1 |
| CSS プロパティ | ||||||
auto 非推奨 | 1 | 12 | 19 | 1.3 | 18 | 1 |
avoid 非推奨 | 1 | 12 | 19 | 1.3 | 18 | 1 |
注釈 1件
実装メモ
- Firefox 25 までは、「page-break-inside:avoid」はブロックの高さに対して機能しませんでした。
基本構文
CSS
/* Legacy syntax */
.no-break {
page-break-inside: avoid;
}
/* Recommended syntax */
.no-break {
break-inside: avoid;
}ライブデモ
実務での使いどころ
-
レガシーコードの印刷スタイル維持
古いブラウザや既存コードベースとの互換性を保ちつつ、印刷時のページ区切り制御を行います。
注意点
- 新規開発ではbreak-before、break-inside、break-afterプロパティを使用してください。page-break系は互換性のためのエイリアスです。
アクセシビリティ
- 印刷スタイルでは、見出しとその直後のコンテンツが同じページに収まるよう設定すると、印刷物の読みやすさが向上します。