CSS Reference Property

page-break-inside

The page-break-inside property is used to specify whether or not a page break should occur inside the element it is applied to.

Page breaks are applied to paged media, such as printed books or documents. When a page is broken, the layout ends in the current page and the remaining elements of the document are laid out in a new page. You can see this in PDF documents, where some pages have a lot of white space left, and content continues on the next page. If no page break rules are specified, the page may break inside pieces of content such as text, lists, code snippets, images, etc.

break-pages
Image showing a page break with a paragraph of text spanning across two pages.

Sometimes, the page breaks in the middle of an element such as an image, which causes it to be split and span across two pages. This is usually an undesirable effect.

page-break-inside-image
An image split into two spanning across two pages because of a page break inside it.

You may want to avoid page breaks inside tables, code snippets, lists of items, and images, for example. Using the page-break-inside property, you can do just that.

In the following example, we’re using the @media rule to specify page break styles for printed documents. We’re going to tell the user agent to avoid page breaks inside images. At this point, it is important to note that the page-break-inside property can only be applied to block-level elements, and the user agent can apply them to ‘table-row’ elements too. Considering that an image is an inline-level element and not a block-level element, you would have to reset its display to block or inline-block.

@media print {
    img {
        display: block;
        page-break-inside: avoid;
    }
}
                

By doing this, the user agent will print the entire image on a single page, either at the end of a page if there is enough space, or at the start of another one if there isn’t.

Similarly, you can avoid page breaks inside tables, lists, and any other block-level element.

page-break-inside-code
A code block split into two spanning across two pages because of a page break inside it. This can be avoided using the page-break-inside property.

Trivia & Notes

Page breaks may help avoid or cause orphans and widows in pages.

When a page break splits a box, the box’s margins, borders, and padding have no visual effect where the split occurs.

Official Syntax

  • Syntax:

    page-break-inside: avoid | auto | inherit 
  • Initial: auto
  • Applies To: block-level elements in the normal flow of the root element. User agents may also apply it to other elements like table-row elements.
  • Animatable: no

Values

auto
Neither force nor forbid a page break inside the element.
avoid
Avoid a page break inside the element.

Examples

/* avoid page breaks in tables, lists, images, and code snippets */
@media print {
    img {
        display: block;
    }
    img, table, ul, ol, .code-snippet {
        page-break-inside: avoid;
    }
}
                

Browser Support

CSS page-break properties

Properties to control the way elements are broken across (printed) pages.

W3C Recommendation

Supported from the following versions:

Desktop

  • 4
  • 2
  • 10
  • 15
  • 3.1

Mobile / Tablet

  • 3.2
  • 2.1
  • all
  • 57
  • 52

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated March 17, 2017 at 1:08 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.