break-before

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

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.

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.

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

Using break-before, you can tell the user agent to break the page, column, or region before the element that break-before is applied to, thus avoiding the element to be split and span across two pages.

For example, you can tell the user agent to break a page before an h1 element. The heading and any content that comes after it would then be printed on the next page, such as a heading of a new chapter in a book, for example, which usually starts in a new page. You rarely ever see a chapter start in the middle or end of a page.

In the following example, we’re using the @media rule to specify page break styles for printed documents. We’ll select all h1 headings and tell the user agent to break the pages before the headings at all times.

@media print {
    h1 {
        page-break-before: always;
    }
}
                

The break-before property also specifies on what page (left or right) the subsequent content should resume. For example, if you want all chapters to start on a right page, you can cause a page break before the headings and specify that the heading and content after it should start on a right page like so:

@media print {
    h1 {
        break-before: right;
    }
}
                

Another use case for break-before is to break pages before comment threads. It is preferable to print comment threads on a new page and not have them start in the middle or end of the previous page which could normally contain the ending part of an article, for example.

Similarly, CSS Regions breaks can also be controlled. A lot of times, Regions may be defined visually far from each other, or can be separated by large chunks of content, which makes splitting content across them undesirable. For example, if you have a list of items and that list is split across two regions, that would cause the reader’s flow to be interrupted in an unwanted way. Using break-before, you can tell the browser to break the region before the list of items, not inside it, and then render the list inside a new region.

.region ul {
    break-before: region;
}
                

In a similar way, you can avoid column breaks inside certain pieces of content like, code snippets for example, by using break-before.

.element {
    /* create multi-column layout on an element */
    column-width: 12em;
}

.element .code-snippet {
    break-before: column;   
}
                

Trivia & Notes

The break-before 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-before, the properties break-after and break-inside are also used to control page, column, and region breaks after and inside 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.