Break-after | CSS-Tricks

CSS Almanac → Properties → B → break-after

Sunkanmi Fafowora on Jun 13, 2022 (Updated on Jun 16, 2022)

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.

Note: break-after is an alias for the deprecated page-break-after property.

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:

`break-after`	`page-break-after`
`auto`	`auto`
`right`	`right`
`avoid`	`avoid`
`left`	`left`
`page`	`always`

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.

Multi-column layout

In this demo, we have a set of boxes that we want to display as in a multi-column layout. Specifically, we want each box to be a column. This is the HTML:

<main>

  <section>
    <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>
  </section>

  <section>
    <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>
  </section>

  <section>
    <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>
  </section>

  <!-- and so on... -->

</main>

If we were to simply define columns and stop there, there’s no guarantee that the boxes will line up nicely with one another.

That’s where break-after comes in. If we set it with a value of column (we are working with a multi-column layout afterall) on the <section> element like this:

section {
  break-after: column;
}

…then the columns will break right after each <section> which tidies things up nicely:

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: