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

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

    you are awesome, thanks

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

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

  6. User Avatar
    Thomas
    Permalink to comment#

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

    • User Avatar
      Mark Hetherington
      Permalink to comment#

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

  7. User Avatar
    Mitchell McKinnon

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

  8. User Avatar
    Janit Ahluwalia
    Permalink to comment#

    page-break-inside:avoid is a lifesaver!

  9. User Avatar
    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. User Avatar
    Tomas
    Permalink to comment#

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

  11. User Avatar
    Accord Dental
    Permalink to comment#

    Very awesome, very helpful – thank you!

  12. User Avatar
    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. User Avatar
    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

  14. User Avatar
    Margaret
    Permalink to comment#

    Extremely helpful script – it got me out of a hole. Thank you.

  15. User Avatar
    Wei Wang

    None of these seem to work anymore in Chrome and Safari.

  16. User Avatar
    Richard Ayotte
    Permalink to comment#

    left and right behave as always in most browsers.

  17. User Avatar
    Bradley
    Permalink to comment#

    This works great but I have a scenario where content bleeds into a second page and the page break is ignored. The subsequent breaks all work…just not the break where the content bleeds into the next page. Thoughts?

  18. User Avatar
    HaJo
    Permalink to comment#

    So, the example with always-pagebreak-before H2,
    that would leave a H1-header all alone on a page by itself ?

    How to avoid that ?

  19. User Avatar
    Arun Jain
    Permalink to comment#

    That’s great but i have one issue when i use “page-break-after:always” it adds a empty page will you please help me to remove that empty page

  20. User Avatar
    sheriffderek
    Permalink to comment#

    I’m trying to get some working example of this. Has it changed at all? http://s.codepen.io/sheriffderek/debug/AXkNWq So far, no luck.

  21. User Avatar
    uamv

    Does anyone know whether these properties work with HTML emails? Or does support depend on the client in which a message is being viewed?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag