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 the compatibility 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 the break-before
property.
The page-break-before
CSS property adjusts page breaks before the current element.
This property applies to block elements that generate a box. It won't apply on an empty
The effect of this property can be noticed when the document is being
printed or a preview of a print is displayed.
Initial value. Automatic page breaks (neither forced nor forbidden). Always force page breaks before the element. Avoid page breaks before the element. Force 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. Force 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. If pages progress left-to-right, then this acts like If pages progress left-to-right, then this acts like The For compatibility reasons, Try it
page-break-before: auto;
page-break-before: always;
.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");
});
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
auto
always
avoid
left
right
recto
right
. If pages progress right-to-left, then this acts like left
.verso
left
. If pages progress right-to-left, then this acts like right
.Page break aliases
page-break-before
property is now a legacy property, replaced by break-before
.page-break-before
should be treated by browsers as an alias of break-before
. This ensures that sites using page-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 like table-row
elements.Inherited no Computed value as specified Animation type discrete Formal syntax
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 Level 1
# pageCSS Paged Media Module Level 3
# page-break-beforeCSS Fragmentation Module Level 3
# page-break-propertiesBrowser compatibility
See also