page-break-after - CSS | MDN (original) (raw)
Try it
page-break-after: always;
<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>
.box {
border: solid #5b6dcd 5px;
background-color: #5b6dcd;
margin: 10px 0;
padding: 5px;
}
#example-element {
border: solid 5px #ffc129;
background-color: #ffc129;
color: black;
}
const btn = document.getElementById("print-btn");
btn.addEventListener("click", () => {
window.print();
});
Syntax
/* Keyword values */
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;
/* Global values */
page-break-after: inherit;
page-break-after: initial;
page-break-after: revert;
page-break-after: revert-layer;
page-break-after: unset;
This property applies to block elements that generate a box. It won't apply on an empty that won't generate a box.
Values
Initial value. Automatic page breaks (neither forced nor forbidden).
Always force page breaks after the element.
Avoid page breaks after the element.
Force page breaks after the element so that the next page is formatted as a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.
Force page breaks after the element so that the next page is formatted as a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.
If pages progress left-to-right, then this acts like right. If pages progress right-to-left, then this acts like left.
If pages progress left-to-right, then this acts like left. If pages progress right-to-left, then this acts like right.
Page break aliases
The page-break-after property is now a legacy property, replaced by break-after.
For compatibility reasons, page-break-after should be treated by browsers as an alias of break-after. This ensures that sites using page-break-after continue to work as designed. A subset of values should be aliased as follows:
| page-break-after | break-after |
|---|---|
| auto | auto |
| left | left |
| right | right |
| avoid | avoid |
| always | page |
Formal definition
| Initial value | auto |
|---|---|
| Applies to | block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
page-break-after =
auto |
always |
avoid |
left |
right |
inherit
Examples
Setting a page break after footnotes
/* move to a new page after footnotes */
div.footnotes {
page-break-after: always;
}
Specifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # page |
| CSS Fragmentation Module Level 3 # page-break-properties |