page-break-after
警告: このプロパティは 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; 試してみましょう
page-break-after: auto; page-break-after: always; <section id="default-example"> <div> <p> The effect of this property can be noticed when the document is being printed or a preview of a print is displayed. </p> <button id="print-btn">Show Print Preview</button> <div class="box-container"> <div class="box">Content before the property</div> <div class="box" id="example-element"> Content with 'page-break-after' </div> <div class="box">Content after the property</div> </div> </div> </section> .box { border: solid #5b6dcd 5px; background-color: #5b6dcd; margin: 10px 0; padding: 5px; } #example-element { border: solid 5px #ffc129; background-color: #ffc129; color: black; } .hide-element { display: none; } const btn = document.getElementById("print-btn"); const editorContainer = document.getElementsByClassName( "css-editor-container", )[0]; const exampleHTMLElement = document.getElementById("default-example"); const printableSection = document.createElement("div"); printableSection.setAttribute("id", "printable-section"); printableSection.classList.add("hide-element"); document.body.appendChild(printableSection); btn.addEventListener("click", () => { const exampleContent = exampleHTMLElement.innerHTML; editorContainer.classList.add("hide-element"); printableSection.innerHTML = exampleContent; printableSection.classList.remove("hide-element"); window.print(); printableSection.classList.add("hide-element"); printableSection.innerHTML = ""; editorContainer.classList.remove("hide-element"); }); このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の <div> には適用されません。
構文
値
auto-
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
always-
要素の後で必ず改ページが行われるように強制します。
avoid-
要素の後で改ページされないようにします。
left-
要素の後における改ページを強制し、次のページが左ページとして整形されるようにします。
right-
要素の後における改ページを強制し、次のページが右ページとして整形されるようにします。
rectoExperimental-
左から右に進むページにおいて
rightと同じ動作をします。右から左に進むページであればleftと同じ働きをします。 versoExperimental-
左から右に進むページにおいて
leftと同じ動作をします。右から左に進むページであればrightと同じ働きをします。
改ページの別名
page-break-after プロパティは古いプロパティとなり、 break-after で置き換えられました。
互換性のため、 page-break-after はブラウザーでは break-after の別名として扱われます。これにより、 page-break-after を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
| page-break-after | break-after |
|---|---|
auto | auto |
left | left |
right | right |
avoid | avoid |
always | page |
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素に table-row 要素のように適用することがあります。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
page-break-after =
auto |
always |
avoid |
left |
right |
inherit
例
脚注の後にページ区切りを設定
css
/* 脚注の後で新しいページに移ります */ div.footnotes { page-break-after: always; } 仕様書
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # page |
| CSS Fragmentation Module Level 3 # page-break-properties |