Page break aliases
page-break-after は CSS のプロパティで、現在の要素の後で改ページが行われるように調整します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| 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 |
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 |
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系は互換性のためのエイリアスです。
アクセシビリティ
- 印刷スタイルでは、見出しとその直後のコンテンツが同じページに収まるよう設定すると、印刷物の読みやすさが向上します。