page-break-before
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see thecompatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Warning:This property has been replaced by thebreak-before property.
Thepage-break-beforeCSS property adjusts page breaksbefore the current element.
This property applies to block elements that generate a box. It won't apply on an empty<div> that won't generate a box.
Try it
page-break-before: auto;page-break-before: 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>Show Print Preview</button> <div> <div>Content before the property</div> <div>Content with 'page-break-before'</div> <div>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-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;/* Global values */page-break-before: inherit;page-break-before: initial;page-break-before: revert;page-break-before: revert-layer;page-break-before: unset;Values
autoInitial value. Automatic page breaks (neither forced nor forbidden).
alwaysAlways force page breaks before the element.
avoidAvoid page breaks before the element.
leftForce page breaks before 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.
rightForce page breaks before 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.
rectoIf pages progress left-to-right, then this acts like
right. If pages progress right-to-left, then this acts likeleft.versoIf pages progress left-to-right, then this acts like
left. If pages progress right-to-left, then this acts likeright.
Page break aliases
Thepage-break-before property is now a legacy property, replaced bybreak-before.
For compatibility reasons,page-break-before should be treated by browsers as an alias ofbreak-before. This ensures that sites usingpage-break-before continue to work as designed. A subset of values should be aliased as follows:
| page-break-before | break-before |
|---|---|
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 liketable-row elements. |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
page-break-before =
auto|
always|
avoid|
left|
right|
inherit
Examples
Avoid a page break before an element
/* Avoid page break before div elements of class note */div.note { page-break-before: avoid;}Specifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # page |
| CSS Fragmentation Module Level 3 # page-break-properties |