Grow your CSS skills. Land your dream job.

page-break

Last updated on:

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

Other resources

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.

Comments

  1. Awesome. I’ve been wanting to do something like this for a while. Never liked breaking in the middle of particular sections, especially when it orphans data on the next page!

    Very helpful! Thanks!

  2. you are awesome, thanks

  3. james
    Permalink to comment#

    I don’t see “page-break-inside” working on any browser, let alone most major browsers, would you please provide a demo page?

    Thank you!

  4. Bouke
    Permalink to comment#

    Safari 7 on OS X sadly doesn’t appear to be supporting page-break-after: avoid. I’ve tested using a header with paragraph, but they got separated at page boundary.

  5. Permalink to comment#

    Something has changed. page-break-before: always; no longer works in Chrome or Safari. Firefox respects it though.

  6. Permalink to comment#

    page-break-inside:avoid;
    This works. in Chrome, Firefox and Safari.

    • Mark Hetherington
      Permalink to comment#

      Not only does page-break-inside:avoid; work, but it seems the most useful of the options!

  7. Mitchell McKinnon

    I’ve seen the “auto” option listed several places, but no one ever explains what it’s supposed to do.

  8. Janit Ahluwalia
    Permalink to comment#

    page-break-inside:avoid is a lifesaver!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".