page-break-afterとは、HTML文書を紙に印刷するときや印刷部プレビュー時に、要素の直後で改ページするCSSプロパティである。通常のウェブブラウザ表示には、何の影響も与えない。
page-break-after: mode印刷時改ページの扱いを指定する。以下に示す値を mode に指定できる。
break-afrer: page; と同じ。
<p style="page-break-after: always">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
break-afrer: avoid-page; と同じ。
<p style="page-break-after: avoid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
break-afrer: left; と同じ。
<p style="page-break-after: left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
break-afrer: right; と同じ。
<p style="page-break-after: right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
auto
親要素の break-after プロパティの値は子要素に継承されない。
page-break-after は印刷時のページ分割に使うプロパティであり、印刷用メディア（@media print）に限定されるのに対して、break-after は印刷だけでなく、より汎用的なブレーク制御を行い、印刷だけでなく、段組（columns）、リージョン（regions）、ページなどにも対応している。
| 項目 | break-after | page-break-after |
|---|---|---|
| 対象 | 段組・リージョン・ページなど | 印刷メディアのみ |
| モダン対応 | 新しい（推奨） | 古い（レガシー） |
| 値の種類 | 豊富 | 限定的 |
| 推奨度 | モダンブラウザ向けに推奨 | 廃止予定ではないが、将来的には非推奨に近い |
page-break-beforeとは、HTML文書を紙に印刷するときや印刷部プレビュー時に、要素の直前で改ページするCSSプロパティである。
通常のウェブブラウザ表示には、何の影響も与えない。
page-break-before: mode印刷時の改ページの扱いを指定します。
break-before: page; と同じ。
<p style="page-break-before: always">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
break-before: avoid-page; と同じ。
<p style="page-break-before: avoid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
break-before: left; と同じ。
<p style="page-break-before: left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
break-before: right; と同じ。
<p style="page-break-before: right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
auto
親要素の break-before プロパティの値は子要素に継承されない。
page-break-before は印刷時のページ分割に使うプロパティであり、印刷用メディア（@media print）に限定されるのに対して、break-before は印刷だけでなく、より汎用的なブレーク制御を行い、印刷だけでなく、段組（columns）、リージョン（regions）、ページなどにも対応している。
| 項目 | break-before | page-break-before |
|---|---|---|
| 対象 | 段組・リージョン・ページなど | 印刷メディアのみ |
| モダン対応 | 新しい（推奨） | 古い（レガシー） |
| 値の種類 | 豊富 | 限定的 |
| 推奨度 | モダンブラウザ向けに推奨 | 廃止予定ではないが、将来的には非推奨に近い |
印刷時に要素の途中で改ページすることを禁止します。
印刷するときや、印刷プレビューで表示するときにのみ影響します。ブラウザで表示する場合は、何も影響ありません。
page-break-inside: mode印刷時の改ページの扱いを指定します。
auto
親要素の break-inside プロパティの値は子要素に継承されない。
page-break-inside は印刷時のページ分割に使うプロパティであり、印刷用メディア（@media print）に限定されるのに対して、break-inside は印刷だけでなく、より汎用的なブレーク制御を行い、印刷だけでなく、段組（columns）、リージョン（regions）、ページなどにも対応している。
| 項目 | break-inside | page-break-inside |
|---|---|---|
| 対象 | 段組・リージョン・ページなど | 印刷メディアのみ |
| モダン対応 | 新しい（推奨） | 古い（レガシー） |
| 値の種類 | 豊富 | 限定的 |
| 推奨度 | モダンブラウザ向けに推奨 | 廃止予定ではないが、将来的には非推奨に近い |
World Wide Web Consortium (2023) CSS Fragmentation Module Level 3