totn CSS

CSS: page-break-after property

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

Description

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

Syntax

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

page-break-after: value;

Parameters or Arguments

value

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

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

Note

Browser Compatibility

The CSS page-break-after 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-after 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-after property to always.

The CSS would look like this:

p { page-break-after: always; }

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

Avoid

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

The CSS would look like this:

p { page-break-after: avoid; }

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

Left

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

The CSS would look like this:

p { page-break-after: left; }

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

Right

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

The CSS would look like this:

p { page-break-after: right; }

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

Auto

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

The CSS would look like this:

p { page-break-after: auto; }

In this CSS page-break-after example, the page-break-after 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.

Share on: