CSS Tutorial – break-after

The CSS break-after 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-after: 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 Multi-column Layout Module Level 1 specification, which is in Editor Draft status. So, some of the following values are experimental and could change at some point.

The big thing to know about break-after 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 force nor forbid a break (page, column, or region) after the element.
• avoid: Avoids a break (page, column, or region) after the element.
• all: (Experimental) Forces a page break after the element. Breaking through all possible fragmentation contexts. So a break inside a multi-column container, which was inside a page container would force a column and page break.
• always: (Experimental) Forces a page break after the element. This value is in the context of the immediately-containing fragmentation. If we are inside a multi-column container, like using the column property on the parent container, then it would force a column break. In paged media, it forces a page break.

Paged Media values

• avoid-page: Avoids any page break after the element.
• page: Forces a page break after the element.
• left: Forces one or two page breaks after 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 after 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) Force one or two page breaks after 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) Force one or two page breaks after 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 after the element.
• column: (Experimental) Always forces a column break after the element .

Regions values

• avoid-region: Avoids a region break after the element.
• region: Always force a region break after the element.

break-after replaces page-break-after

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

What’s the difference? Well, page-break-after was only for paged media. break-after 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-after, it is also contained in the CSS Fragmentation, Multi-column Layout and Regions specifications.

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

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

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

Demos

Let’s take a look at a couple of demos to better understand how break-after 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-after: avoid;
  margin-block-end: 50px;
  padding: 1rem;
}