CSS break-before Property

Definition and Usage

The break-before property sets how a page, column, or region break should behave before 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-after on the previous element and break-inside on the container. Forced values win over avoid values, and a later forced break-before wins over an earlier forced break-after.

CSS Syntax

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

Property Values

How to Use break-before

Pick the fragmentation context first (print page or multi-column), then force or avoid a break so the target block starts cleanly.

1. Choose the element that should start a new page or column (often a heading).
2. For print, use break-before: page and check Print Preview.
3. For columns, put the content in a multi-column container (column-count or columns), then use break-before: column.
4. Use avoid when this box should not start right after a break if the browser can keep flowing.

Live Preview

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

CSS Examples

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

<style>
  .chapter {
    break-before: page;
  }
</style>

<h1>Section A</h1>
<p>Content for A.</p>
<h1 class="chapter">Section B</h1>

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

  h2 {
    break-before: 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-before: avoid;
  }
</style>

<p>Intro text.</p>
<h2 class="keep">Heading</h2>

Key Takeaways