CSS Reference Property

break-inside

The break-inside property is used to specify whether or not a page break, region break, or column 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.

Column breaks occur in paged media with multi-column layouts and on web pages with a multi-column layout. When a column breaks, a block-level element such as a paragraph of text is split and spans over the current column and the next columns after it.

break-columns
Image showing a column break with a paragraph of text spanning across two columns.

A region break occurs between regions defined using CSS Regions, where content in one region is split and spans across multiple regions because the size of one region is not enough to contain the entire content. For example, a paragraph of text or a list of items that span across two regions. For example, the piece of text highlighted in red in the following image is broken and spans across two regions because the second region breaks inside the paragraph.

break-regions
Image showing a region break with a paragraph of text spanning across two regions.

in CSS2.1, the page-break-inside property is defined to control page breaks. The break-inside property extends that property.

Sometimes, the pages, regions, or columns break 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 breaks inside tables, code snippets, lists of items, and images, for example. Using the 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 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;
        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 image breaking between CSS columns and regions.

For example, the following image shows a block of code in a two-column layout. The first example shows how the columns would break inside the code, spanning it across two columns. The second image shows how we can avoid the break inside the block of code, using break-inside: avoid-column.

pre.snippet {
    break-inside: avoid-column;
}
                
break-inside-demo-screenshot
A screenshot of the demo

The above image is a screenshot of the live demo which you can see in the Live Demo section below. Make sure you check the browser support section to see if the demo should work in your browser or not.

Trivia & Notes

The break-inside property is applied to block-level elements in the normal flow of the root element. User agents may also apply it to other elements, e.g., ‘table-row’ elements.

When a page or column break splits a box, the box’s margins, borders, and padding have no visual effect where the split occurs. However, the margin immediately after a forced page/column break will be preserved. A forced page/column break is a break that does not occur naturally.

In addition to break-inside, the properties break-before and break-after are also used to control page, column, and region breaks before and after elements. Each break point is under the influence of these three properties together. Sometimes, the values of these three may not make much sense together. To define if a break must be done, the following rules are applied:

  1. If any of the three properties’ values is a forced break value, that is always, left, right, page, column or region, it has precedence and will be applied. If more than one of these values is a forced break, the break-before value has precedence over the break-after value, which in turn has precedence over the break-inside value.
  2. If any of the three properties’ values is an avoid break value, that is avoid, avoid-page, avoid-region, avoid-column, no such break will be applied at that point.

Official Syntax

  • Syntax:

    break-inside: auto | avoid | avoid-page | avoid-column | avoid-region
  • Initial: auto
  • Applies To: block-level elements
  • Animatable: no

Values

auto
Neither force nor forbid a page/column/region break inside the element.
avoid
Avoid a page/column/region break inside the element.
avoid-page
Avoid a page break inside the element.
avoid-column
Avoid a column break inside the element.
avoid-region
Avoid a region break inside the element.

Examples

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

The following example avoids region breaks inside a list of items, assuming the list item is part of a flow that is rendered inside defined regions:

.checklist {
    break-inside: avoid-region;
}
                

Live Demo

The following demo only works in IE10+ with break-inside. In WebKit-based browsers, the -webkit-column-break-inside is used, which is a non-standard alternative for break-inside that is supported in those browsers. We used it to make sure the demo works in your browser if you’re using a WebKit-based one. The demo does not currently work in Firefox. See the browser support section below for more information on browser support.

The first example shows how the column would break without using break-inside. The second column shows how the column break occurs in a way that the block of code is not broken, using the avoid-column value.

View this demo on the Codrops Playground

Browser Support

The break-inside property is supported only in Internet Explorer 10+ and Opera pre-WebKit starting from version 11.10.

Notes

WebKit browsers don’t support this property; but some have the non-standard -webkit-column-break-inside and -webkit-region-break-inside with similar parameters as page-break-inside.

Written by

Last updated February 3, 2015 at 12:35 pm by Mary Lou

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