CSS page-break-before Property

The page-break-before property defines page break before the element.

This property cannot be used on an empty <div> or on absolutely positioned elements.

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

Generally, page breaks are applied to such paged media, as printed books or documents. After breaking a page, the layout finishes on the current page and the elements of the document that remain continue on the next page. You can often meet this in PDF documents.

With the help of the page-break-before property you can define on what page (right or left) the following content must restart. 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

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

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

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

Values

Value	Description
auto	Allows any automatic page break before the element.
avoid	Avoids to insert any page break before the element.
always	Forces to insert any page break before the element.
left	Insert a page break before the element so that the next page is formatted as a left page.
right	Insert a page break before the element so that the next page is formatted as a right page.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.