Treehouse: 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. Kyle B. Johnson
    Permalink to comment#

    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. manish tiwari
    Permalink to comment#

    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. Thomas
    Permalink to comment#

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

  6. Thomas
    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!

  9. v
    Permalink to comment#

    Hi,

    I wonder if it would be possible to decorate the page breaks as follows:

    Say I have a paragraph that I want to avoid page-break within. So, I set page-break-inside : avoid as you mentioned. But, for some devices, it’s not possible to avoid the break. Would it be possible, in that case use some sort of decoration to indicate that the page-break happened within such a paragraph? Say, if the break happens, I want to add a right aligned ➜ to indicate the continuation of the paragraph.

  10. Tomas
    Permalink to comment#

    Para Chrome recomiendo utilizar:
    -webkit-column-break-after

    • Prasad Siri
      Permalink to comment#

      -webkit-column-break-after also not working in chrome

  11. Accord Dental
    Permalink to comment#

    Very awesome, very helpful – thank you!

  12. Nitin
    Permalink to comment#

    I have a table with many columns and need to export it to pdf. I want to the table column wise. So, that, first page displays first 4 cols, then next page next 4.Once all the cols are displayed more rows should be displayed starting with the first cols

  13. Jeux en Bois
    Permalink to comment#

    page-break-inside:avoid
    Very helpful on Firefox! Thanks!
    but some troubles with chrome and IE
    same problem with
    -webkit-column-break-inside: avoid
    break-inside: avoid

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```