CSS break-after Property

Definition and Usage

The break-after property sets how a page, column, or region break should behave after an element’s box. If the element does not generate a box, the property is ignored.

It applies to block-level elements and is not inherited. The initial value is auto. Breaks are decided together with break-before on the next element and break-inside on the container. Forced values win over avoid values.

CSS Syntax

Other keywords exist (always, left, right, region, and more). Start with auto, page, column, and avoid.

Property Values

How to Use break-after

Pick the fragmentation context first (print page or multi-column), then force or avoid a break after a specific block.

1. Choose the element that should end a page or column.
2. For print, use break-after: page and check Print Preview.
3. For columns, put the content in a multi-column container (column-count or columns), then use break-after: column.
4. Use avoid when the next content must stay with this box if possible.

Live Preview

A three-column article. Toggle break-after on each heading. With column, each heading starts a new column in Chromium browsers.

CSS Examples

Each snippet focuses on break-after. Use Print Preview for page breaks. Use Try It Yourself for a live editor.

<style>
  .end {
    break-after: page;
  }
</style>

<h1>Section A</h1>
<p class="end">Ends this page when printed.</p>
<h1>Section B</h1>

<style>
  article {
    column-count: 3;
  }

  h2 {
    break-after: column;
  }
</style>

<article>
  <h2>One</h2>
  <p>Text</p>
  <h2>Two</h2>
  <p>Text</p>
  <h2>Three</h2>
  <p>Text</p>
</article>

<style>
  .keep {
    break-after: avoid;
  }
</style>

<h2 class="keep">Heading</h2>
<p>Try to keep this with the heading.</p>

Key Takeaways