CSS page-break-before Property

The page-break-before property defines a page break before an element.

WARNING

The page-break-before property is replaced by the break-before property.

Generally, page breaks are applied to paged media such as printed books or documents. Once a page break occurs, the current layout ends, and remaining content flows to the next page. This behavior is commonly seen in PDF documents.

The page-break-before property lets you specify whether the following content should start on a left or right page. You can use the CSS @media rule to define break styles for printed documents.

Initial Value	auto
Applies to	Block-level elements.
Inherited	No.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.pageBreakBefore = "left";

Syntax

CSS page-break-before syntax

page-break-before: auto | always | avoid | left | right | recto | verso | initial | inherit;

Use the code example below to define page break before the element:

CSS page-break-before code example

@media print {
  h2 {
    page-break-before: right;
  }
}

Values

Value	Description
auto	Allows automatic page breaks before the element.
avoid	Prevents a page break from occurring before the element.
always	Forces a page break to occur before the element.
left	Inserts a page break before the element so that the next page is formatted as a left-hand page.
right	Inserts a page break before the element so that the next page is formatted as a right-hand page.
recto	Inserts a page break before the element so that the next page is formatted as a right-hand page (equivalent to right).
verso	Inserts a page break before the element so that the next page is formatted as a left-hand page (equivalent to left).
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Practice

What is the function of the 'page-break-before' property in CSS?

It allows you to insert a page-break-before a box associated with the element.It allows you to insert a page-break-after a box associated with the element.It specifies how an element should be displayed across the pages, in paged media.It controls the behavior of the 'display' property in CSS.