What You’ll Learn

The break-before property controls page, column, and region breaks before an element. It is especially useful for print documents and multi-column layouts where each new section should start fresh on a new page or column.

Definition and Usage

The break-before CSS property controls the page, column, or region break behavior before a specified element. This property is particularly useful in paged media (such as printed documents) or multi-column layouts, allowing you to dictate how content flows across pages or columns.

For example, you can force every chapter heading to start on a new printed page, or make each sidebar section begin at the top of a new column in a magazine-style layout.

📝 Syntax

The syntax for break-before is straightforward and accepts several keyword values:

selector {
  break-before: auto | always | avoid | left | right | page | column | region;
}

Basic Example

@media print {
  h2 {
    break-before: page;
  }
}

Syntax Rules

• The initial value is auto.
• The property is not inherited — apply it to the element that should start the break.
• page forces a new page before the element in paged media.
• column forces a new column before the element in multi-column containers.
• Use @media print when you only want breaks during printing.

💎 Property Values

The break-before property accepts keyword values that control fragmentation before an element.

break-before vs. break-after

These two properties sound similar but control breaks on opposite sides of an element:

• break-before — Inserts a break before the element. The element itself starts on a new page or column. Ideal for chapter headings and section titles.
• break-after — Inserts a break after the element. Content following the element starts fresh. Ideal for ending a section and pushing the next block down.

For chapter headings, break-before: page on h2 is usually the clearest choice — the heading and its content begin together on a new page.

Examples Gallery

Try print chapter breaks, column section starts, avoid rules, and a complete print stylesheet.

<style>
  @media print {
    h2 {
      break-before: page;
    }
  }
</style>

<h1>Chapter 1</h1>
<p>Content of the first chapter...</p>
<h2>Chapter 2</h2>
<p>Content of the second chapter...</p>

<style>
  .columns {
    column-count: 2;
    column-gap: 1.5rem;
  }

  .section-title {
    break-before: column;
  }
</style>

<div class="columns">
  <p>Intro text in column one...</p>
  <h3 class="section-title">Section B</h3>
  <p>Section B starts in the next column.</p>
</div>

<style>
  figure {
    break-before: avoid;
  }
</style>

<p>Paragraph above the figure...</p>
<figure>
  <img src="chart.png" alt="Chart">
  <figcaption>Figure 1: Sales chart</figcaption>
</figure>

@media print {
  .report-section h2 {
    break-before: page;
  }

  .report-section:first-of-type h2 {
    break-before: auto;
  }
}

💡 Best Practices