totn CSS

CSS: page-break-before property

This CSS tutorial explains how to use the CSS property called page-break-before with syntax and examples.

Description

The CSS page-break-before property defines how to handle page breaks before an element.

Syntax

The syntax for the page-break-before CSS property is:

page-break-before: value;

Parameters or Arguments

value

Determines how to handle page breaks before an element. It can be one of the following:

Value Description
auto Page breaks before the element are automatically created as required.
p { page-break-before: auto; }
always Page breaks are always forced before the element.
p { page-break-before: always; }
avoid Page breaks are avoided before the element.
p { page-break-before: avoid; }
left Page breaks are forced before the element resulting in the browser formatting the next page as a left page.
p { page-break-before: left; }
right Page breaks are forced before the element resulting in the browser formatting the next page as a right page.
p { page-break-before: right; }
inherit Element will inherit the page-break-before from its parent element
p { page-break-before: inherit; }

Note

Browser Compatibility

The CSS page-break-before property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera 7+
  • Safari (WebKit)

Example

We will discuss the page-break-before property below, exploring examples of how to use this property in CSS.

Always

Let's look at an example of how to set the page-break-before property to always.

The CSS would look like this:

p { page-break-before: always; }

In this CSS example, the page-break-before property is set to always. This means that when the page is printed, the browser should always force a page break before the paragraph tag.

Avoid

Let's look at an example of how to set the page-break-before property to avoid.

The CSS would look like this:

p { page-break-before: avoid; }

In this CSS example, the page-break-before property is set to avoid. This means that when the page is printed, the browser should format the page to avoid a page break before the paragraph tag.

Left

Let's look at an example of how to set the page-break-before property to left.

The CSS would look like this:

p { page-break-before: left; }

In this CSS example, the page-break-before property is set to left. This means that when the page is printed, the browser should format the page so that the next page before the paragraph tag is formatted as a left page.

Right

Let's look at an example of how to set the page-break-before property to right.

The CSS would look like this:

p { page-break-before: right; }

In this CSS example, the page-break-before property is set to right. This means that when the page is printed, the browser should format the page so that the next page before the paragraph tag is formatted as a right page.

Auto

Now let's look at how to set the page-break-before property to auto.

The CSS would look like this:

p { page-break-before: auto; }

In this CSS page-break-before example, the page-break-before property is set to auto. This means that when the page is printed, the browser should automatically generate page breaks where appropriate. This is the default behavior.