What You’ll Learn

The break-after property controls page, column, and region breaks after an element. It is especially useful for print styles, multi-column layouts, and any design where you need content to split at specific points.

Definition and Usage

The break-after CSS property controls the behavior of page, column, or region breaks after an element. It is particularly useful in paged media, multi-column layouts, and other situations where content needs to be broken up across multiple pages, columns, or regions.

This property helps manage content flow in a more controlled and predictable manner. For example, you can force a new printed page after a chapter heading, or start the next section in a new column of a magazine-style layout.

📝 Syntax

Apply break-after to an element and specify the type of break you want after it:

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

Basic Example

.page-break {
  break-after: page;
}

Syntax Rules

• The initial value is auto.
• The property is not inherited — set it on the element where the break should occur.
• page, column, and region target specific fragmentation contexts.
• avoid tries to prevent a break immediately after the element.
• Use inside @media print when you only want breaks when printing.

💎 Property Values

The break-after property accepts several keywords that control how and where content fragments after an element.

When Does break-after Matter?

Fragmentation breaks only happen in specific layout contexts. These are the most common places where break-after is useful:

• Print and PDF — Force new pages after chapters, invoices, or report sections using break-after: page.
• Multi-column layouts — Start the next block in a new column with break-after: column.
• Regions — Advanced layouts with named flow regions can use break-after: region.
• Readable grouping — Use avoid to keep related content from splitting awkwardly.

On a single scrolling web page with no columns, you may not see any effect — that is normal. Test in print preview or inside a column-count container to verify behavior.

Examples Gallery

Try print page breaks, column breaks, avoid rules, and a full print stylesheet.

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

<h1>Content Before Page Break</h1>
<div class="page-break">
  This content will be followed by a page break.
</div>
<h1>Content After Page Break</h1>
<p>This content will appear on a new page.</p>

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

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

<div class="magazine">
  <p>Section one text...</p>
  <div class="section-end"></div>
  <p>Section two starts in the next column.</p>
</div>

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

<h2>Chapter Title</h2>
<p>The paragraph stays with the heading instead of breaking away.</p>

@media print {
  .chapter {
    break-after: page;
  }

  h2 {
    break-after: avoid;
  }
}

💡 Best Practices