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.



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.


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.


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


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'.


@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.


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

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

  6. User Avatar
    Permalink to comment#

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


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

    Para Chrome recomiendo utilizar:

  11. User Avatar
    Accord Dental
    Permalink to comment#

    Very awesome, very helpful – thank you!

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

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

    I’m trying to get some working example of this. Has it changed at all? So far, no luck.

  21. User Avatar

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

    • User Avatar
      bruno viana
      Permalink to comment#

      In my tests, page-break-inside: avoid works well in Gmail, Yahoo and even outlook office. But neither page-break-before:avoid nor page-break-after:avoid works in these clients. page-break-before:always works sometimes.

  22. User Avatar
    Permalink to comment#

    Hi i want to make a page break after some table in pdf ,,i am using this page breaker concept but not it not supporting for me,
    plz help me to do…

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Hey Preeti,

      Have you tried asking around in our forums? Lots of folks from the community hang out and often answer questions there.


Leave 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.