Javatpoint Logo
Javatpoint Logo

CSS page-break-before property

As the name implies, this CSS property is used to add the page break before the element, when printing the document. It inserts a page break before the specified element during printing the document. We cannot use this CSS property on absolutely positioned elements or an empty <div> element that does not generate a box.

This CSS property represents whether or not the page break is allowed before the element's box. Including page-break-before, the CSS properties page-break-after and page-break-inside help us to define the behavior of the document when printed.

Syntax

Possible values

The brief description of the values of this CSS property is tabulated as follows.

Values Description
auto It is the default value that inserts a page break before the element, if necessary.
always This value always forces a page break before the specified element.
avoid It is used to avoid a page break before the element whenever possible.
left This value forces either one or two page breaks before the element so that the next page will be depicted as the left-hand page.
right The right value forces either one or two page breaks before the element so that the next page will be depicted as the right-hand page.
initial It sets the property to its default value.
inherit If this value is specified, the corresponding element uses the computed value of its parent element page-break-before property.

Let's understand the above values using an example of each.

Example - Using the auto value

The value auto is the default value that inserts a page break automatically when required. In this example, we are using the two <div> elements and a button. The button is responsible to print the page. After clicking on the button, we will see the effect of the value.

Test it Now

Output

CSS page-break-before property

Example - Using the always value

This value always forces us to insert a page break, whether it is required or not. We are using a button to print the page. We have to click that button in order to see the effect.

In this example, the page break is applied before the <div> element, so the button will not be printed on the next page. If it is applied after the element then there will be a page break after the <div> element, which causes the button to print on the next page.

Test it Now

Output

CSS page-break-before property

Example - Using the left value

The value left forces to insert one or two page breaks, so that the formatting of the next-page will be as the left page.

Test it Now

Output

CSS page-break-before property

Example - Using the right value

The value right forces to insert one or two page breaks, so that the formatting of the next-page will be as the right page.

Test it Now

Output

CSS page-break-before property




Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA