CSS break-after Property

Description

The break-after property controls how a user agent should behave with regard to fragmentation immediately after the box for the element to which it is applied. In practical terms, it influences whether a page break, column break or other fragmentation boundary should be forced, avoided, or otherwise managed following that element. This makes it useful in paged media (printing or paginated views) and in multi-column layouts where you want to influence the flow of content across successive fragments without restructuring the DOM.

This property is part of the set of fragmentation controls and is meant to be used together with the other break-related properties to express a document’s pagination intent. It complements break-before (which controls fragmentation before an element) and break-inside (which controls whether fragmentation can occur inside an element). Browsers and rendering engines take these hints into account when performing their layout and pagination algorithms, but they may still refuse or override them when doing so would produce unrenderable content (for example, if a single unbreakable box is larger than the remaining space).

In authoring practice, break-after is commonly used to keep logical groups together or to force a logical separation between blocks without adding extra markup. For example, it’s useful for preventing a heading from being stranded at the bottom of a page or for ensuring that a figure stays with the following text. Authors should remember that break rules interact with other layout features - floats, absolutely positioned boxes, oversized content, and fragmentation constraints can all affect whether the hint is honored - so it is best used as a declarative aid rather than a guarantee. Additionally, when preparing content for printing or multi-column presentation, treating break hints as progressive enhancement helps maintain robustness across different user agents.

Definition

Initial value: auto
Applies to: Block level elements
Inherited: No
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.breakAfter

Syntax

break-after: auto | always | avoid | left | right | page | column | avoid-page | avoid-column

Values

autoAllows, meaning neither forbid nor force, any break (either page, column or region) to be be inserted after the principal box.
alwaysA page/column/region break is inserted (forced) after the content block.
leftForce one or two page breaks right after the principal box so that the next page is formatted as a left page.
rightForce one or two page breaks right after the principal box so that the next page is formatted as a right page.
rectoForce one or two page breaks right after the principal box so that next page is formatted as a recto page, that is a right page in a left-to-right spread or a left page in a right-to-left spread.
versoForce one or two page breaks right after the principal box so that next page is formatted as a verso page, that is a left page in a left-to-right spread or a left right in a right-to-left spread.
pageAlways force one page break right after the principal box.
columnAlways force one column break right after the principal box.
regionAlways force one region break right after the principal box.
avoidPrevent any break, either page, column or region, to be inserted right after the principal box.
avoid-pageAvoid any page break right after the principal box.
avoid-columnAvoid any column break right after the principal box.
avoid-regionAvoid any region break right after the principal box.
inherit

Example

HTML

<div class='container'>

  <section class='panel'>

    <h1>Section 1</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.</p>

  </section>



  <section class='panel break-after-page'>

    <h1>Section 2  -  Forced Page Break After</h1>

    <p>This section uses break-after: page to force a page break after it when printing.</p>

  </section>



  <section class='panel'>

    <h1>Section 3</h1>

    <p>Content following the forced page break. When printed, this will start on the next page.</p>

  </section>



  <div class='columns'>

    <article class='col-item'>

      <h2>Column Item 1</h2>

      <p>Short column content to demonstrate multi-column layout behavior.</p>

    </article>



    <article class='col-item break-after-column'>

      <h2>Column Item 2  -  Break After Column</h2>

      <p>This element uses break-after: column to force the following content into the next column.</p>

    </article>



    <article class='col-item'>

      <h2>Column Item 3</h2>

      <p>Another column item that may appear in the next column because of the previous break-after rule.</p>

    </article>

  </div>



  <section class='panel break-after-avoid'>

    <h1>Section 4  -  Avoid Page Break After</h1>

    <p>This section uses break-after: avoid to discourage a page break immediately after it when printing.</p>

  </section>

</div>

CSS

/* Page and column break examples */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
  color: #222;
  line-height: 1.5;
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

.panel {
  padding: 16px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  margin-bottom: 16px;
  border-radius: 4px;
}

.panel h1 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.panel p {
  margin: 0;
}

/* Multi-column container */
.columns {
  column-count: 3;
  column-gap: 20px;
  margin: 24px 0;
}

.col-item {
  break-inside: avoid;
  padding: 8px 0;
}

/* break-after examples applied to the elements */
.break-after-page {
  break-after: page; /* forces a page break after this element in paged media */
}

.break-after-column {
  break-after: column; /* forces a column break after this element in multi-column layout */
}

.break-after-avoid {
  break-after: avoid; /* discourages a page break after this element in paged media */
}

/* Visual hints on screen to indicate where breaks are requested */
.break-after-page::after,
.break-after-column::after,
.break-after-avoid::after {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.85;
}

.break-after-page::after {
  content: '⎋ page break after';
  color: #b33;
}

.break-after-column::after {
  content: '⎋ column break after';
  color: #0a66c2;
}

.break-after-avoid::after {
  content: '⎋ avoid page break after';
  color: #2a8f5a;
}

/* Optional: better print layout */
@media print {
  body {
    margin: 10mm;
  }

  .container {
    max-width: 100%;
  }

  /* Ensure visual hints do not print */
  .break-after-page::after,
  .break-after-column::after,
  .break-after-avoid::after {
    display: none;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS break-after property. Hover over a browser icon to see the version that first introduced support for this CSS property.