page-break

There isn’t an actual page-break property in CSS. It is actually a set of 3 properties: page-break-before, page-break-after and page-break-inside. These properties help define how the document is supposed to behave when printed. For example, to make a printed document more book-like.

Properties

page-break-before

The page-break-before property adds a page-break before the element to which it is applied.

Note: this property is in progress of being replaced by the more generic break-before property. This new property also handles column and region breaks while being syntactically compatible with page-break-before. Thus before using page-break-before, check if you can use break-before instead.

A common use case for this is to apply it to the selector #comments so a user printing a page with comments could easily choose to print the whole document but stop before the comments cleanly.

page-break-after

The page-break-after property adds a page-break after the element to which it is applied.

Note: this property is in progress of being replaced by the more generic break-after property. This new property also handles column and region breaks while being syntactically compatible with page-break-after. Thus before using page-break-after, check if you can use break-after instead.

page-break-inside

The page-break-inside property adds a page-break inside the element to which it is applied.

Syntax

page-break-after  : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid

The left and right values for page-break-before and page-break-after refer to a spread layout (like a book) where there are distinct left and right pages. They work like this:

• left forces one or two page breaks after the element so that the next page is formatted as a left page.
• right forces one or two page breaks after the element so that the next page is formatted as a right page.

Consider always as a mix of both. The specification says:

A conforming user agent may interpret the values ‘left’ and ‘right’ as ‘always’.

Example

@media print {
  h2 { 
    page-break-before: always;
  }
  h3, h4 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

This code snippet does 3 things:

• it forces a page-break before all h2 headings (perhaps h2 tags in your document are chapter titles that deserve a fresh page)
• it prevents page-breaks right after sub-headings because that looks odd
• it prevents page-breaks inside pre tags and block-level quotes

Related properties

• @page
• break-after
• break-before
• orphans
• widows

Other resources

• page related properties in the CSS specifications
• break-before and page-break-before at MDN
• break-after and page-break-after at MDN
• page-break-inside at MDN

Browser Support

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Any	Any	Any	7+	4+	TBD	TBD

You can print from mobile devices, like AirPrint on iOS, but we haven’t tested this much. If anyone has data on support, let us know.