CSS Tutorial – break-before

The CSS break-before property is neat in that it allows, forces, or prevents breaks in paged media, multi-column layouts, and regions. When applying the property to an element, what we’re doing is providing an instruction for whether to break or prevent breaks between pages, columns, and regions.

Syntax

break-before: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region

• Initial: auto
• Applies to: block-level boxes, grid items, flex items, table row groups, table rows
• Inherited: no
• Computed value: as specified
• Animation type: discrete

Values

At the time of this writing, the following values are defined in the CSS Fragmentation Module Level 4 specification, which is in Editor Draft status. So, some of the following values are experimental and could change at some point. In fact, the generic all and always values below were not included in the Level 3 specifications.

The big thing to know about break-before is that it is designed to work with paged media, multi-column layouts, and regions. That means we have three sets of possible values that can be used depending on the context.

Generic break values

These values are generic in the sense that they can be used in all three contexts:

• auto: Neither forces nor forbids a break (page, column, or region) before the element.
• avoid: Avoids a break (page, column, or region) before the element.
• all: (Experimental) Forces a page break after the element, breaking all possible fragmentation contexts. So, a break inside a multi-column container that’s inside a page container would force both a column and page break.
• always: (Experimental) Forces a break after the element. This value is in the context of the immediately-containing fragmentation. For example, if we are inside a multi-column container — like using the column property on the parent container — then it would force a column break; inside paged media, it would force a page break.

Paged Media values

• avoid-page: Avoids any page break before the element.
• page: Forces a page break before the element.
• left: Forces one or two page breaks before the element, so anything that makes it to the next page will be formatted to the left; that is, it starts from the left page.
• right: Forces one or two page breaks before the element, so anything that makes it to the next page will be formatted to the right, that is it starts from the right page.
• recto: (Experimental) Forces one or two page breaks before the element, so that the next page is formatted as a recto page (i.e. a right page moving from left-to-right or a left page moving right-to-left).
• verso: (Experimental) Forces one or two page breaks before the element so that the next page is formatted as a verso page (i.e a left page moving from left-to-right or a right page moving from right-to-left)

Multi-column Layout values

• avoid-column: (Experimental) Avoid a column break before the element.
• column: (Experimental) Always forces a column break before the element.

Regions values

• avoid-region: Avoids a region break before the element.
• region: Always forces a region break before the element.

break-before replaces page-break-before

If break-before looks somewhat familiar, that’s because it takes the place of page-break-before, one of three page-break-related properties.

What’s the difference? Well, page-break-before was only for paged media. break-before is a lot more robust as far as where and how it can be used since, in addition to serving as an alias for page-break-before, it is also contained in the CSS Fragmentation, Multi-column Layout and Regions specifications.

Here’s a table of the break-before values that correspond with the legacy page-break-before property values if you’re using it as an alias:

Even though break-before replaces page-break-before, it’s still a good idea to set page-break-before as a fallback for browsers that might lack support for break-before:

.element {
  page-break-before: always; /* fallback */
  break-before: page;
}

But as far as going on and changing page-break-before to break-before throughout your code, no worries. page-break-before is now listed as a legacy shorthand for break-before and will conform to the table values above.

Demos

Let’s take a look at a couple of demos to better understand how break-before works.

Paged Media alias

In this example, the avoid value is used to prevent any page, column, or region breaks in the layout so that when printing the page — yes, with a real printer that uses paper — there are no breaks between the columns. Instead, what we get is a nice single-column layout that’s better suited for printing:

HTML

<main>
  <article>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores</p>
  </article>

  <article>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores</p>
  </article>

  <article>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores</p>
  </article>

  <article>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores</p>
  </article>

  <article>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores</p>
  </article>

  <article>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores</p>
  </article>

  <article>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores</p>
  </article>

</main>

CSS

main {
  column-width: 200px;
  column-gap: 50px;
  padding: 1.5rem;
}

article {
  border: 3px dotted #ff7a18;
  break-before: avoid;
  margin-block-end: 50px;
  padding: 1rem;
}

JS

const printPage = () => {
  window.print();
}