page-break-before
警告: このプロパティは break-before プロパティによって置き換えられました。
page-break-before CSS プロパティは、現在の要素の前で改ページが行われるように調整します。
このプロパティは、ボックスを生成するブロックレベル要素に適用されます。ボックスを生成しない空の <div> には適用されません。
css
/* キーワード値 */ 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: revert; page-break-before: unset; 試してみましょう
page-break-before: auto; page-break-before: 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-before' </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"); }); 構文
値
auto-
初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。
always-
要素の前で必ず改ページが行われるように強制します。
avoid-
要素の前で改ページされないようにします。
left-
要素の前における改ページを強制し、次のページが左ページとして整形されるようにします。
right-
要素の前における改ページを強制し、次のページが右ページとして整形されるようにします。
rectoExperimental-
左から右に読むページにおいて
rightと同じ動作をします。右から左に読むページであればleftと同じ働きをします。 versoExperimental-
左から右に読むページにおいて
leftと同じ動作をします。右から左に読むページであればrightと同じ働きをします。
改ページの別名
page-break-before プロパティは古いプロパティとなり、 break-before によって置き換えられました。
互換性のため、 page-break-before はブラウザーから break-before の別名として扱われます。これにより、 page-break-before を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。
| page-break-before | break-before |
|---|---|
auto | auto |
left | left |
right | right |
avoid | avoid |
always | page |
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | ルート要素の通常フロー内におけるブロックレベル要素。ユーザーエージェントは他の要素に table-row 要素のように適用することがあります。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
page-break-before =
auto |
always |
avoid |
left |
right |
inherit
例
ある要素の前で改ページを防ぐ
css
/* div の前で改ページされないようにします */ div.note { page-break-before: avoid; } 仕様書
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # page |
| CSS Fragmentation Module Level 3 # page-break-properties |