Understanding CSS Break-After for Better Layouts

Column Break Values

The break-after property in CSS includes specific values to manage column breaks, which are crucial for controlling the layout of content in multi-column designs.

avoid-column

• Description: Prevents a column break right after the principal box. This ensures that the content is not split across columns, maintaining continuity.
• Usage: Useful for keeping related content together, such as a heading and its corresponding paragraph, within the same column.

.no-column-break {
  break-after: avoid-column;
}

column

• Description: Forces a column break right after the principal box. This ensures that new content starts in a new column, useful for section breaks or starting new sections within a multi-column layout.
• Usage: Ideal for starting new sections or content within a new column, improving readability and organization.

.new-column {
  break-after: column;
}

Region Break Values

The break-after property in CSS also includes specific values for managing region breaks, which are essential for controlling the layout of content within defined regions.

avoid-region

• Description: Prevents a region break right after the principal box. This ensures that the content is not split across regions, maintaining continuity.
• Usage: Useful for keeping related content together within the same region.

.no-region-break {
  break-after: avoid-region;
}

region

• Description: Forces a region break right after the principal box. This ensures that new content starts in a new region, useful for section breaks or starting new sections within a region-based layout.
• Usage: Ideal for starting new sections or content within a new region, improving readability and organization.

.new-region {
  break-after: region;
}

Page Break Aliases

For compatibility reasons, the legacy page-break-after property should be treated as an alias of break-after. A subset of values should be aliased as follows:

Formal Definition

The break-after property in CSS is formally defined as follows:

• Initial Value: auto
• Applies To: Block-level elements
• Inherited: No
• Computed Value: As specified
• Animation Type: Discrete

Formal Syntax

The syntax for the break-after property is:

break-after =
  auto          |
  avoid         |
  always        |
  all           |
  avoid-page    |
  page          |
  left          |
  right         |
  recto         |
  verso         |
  avoid-column  |
  column        |
  avoid-region  |
  region

Examples

Breaking into Neat Columns

In this example, we use break-after: column to force a column break after each paragraph, ensuring each <h2> appears neatly at the top of each column.

HTML

<article>
  <h1>Main heading</h1>
  <h2>Subheading</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae
    fringilla mauris. Quisque commodo eget nisi sed pretium. Mauris luctus nec
    lacus in ultricies. Mauris vitae hendrerit arcu, ac scelerisque lacus.
    Aliquam lobortis in lacus sit amet posuere. Fusce iaculis urna id neque
    dapibus, eu lacinia lectus dictum.
  </p>
  <h2>Subheading</h2>
  <p>
    Praesent condimentum dui dui, sit amet rutrum diam tincidunt eu. Cras
    suscipit porta leo sit amet rutrum. Sed vehicula ornare tincidunt. Curabitur
    a ipsum ac diam mattis volutpat ac ut elit. Nullam luctus justo non
    vestibulum gravida. Morbi metus libero, pharetra non porttitor a, molestie
    nec nisi.
  </p>
  <h2>Subheading</h2>
  <p>
    Vivamus eleifend metus vitae neque placerat, eget interdum elit mattis.
    Donec eu vulputate nibh. Ut turpis leo, malesuada quis nisl nec, volutpat
    egestas tellus.
  </p>
  <h2>Subheading</h2>
  <p>
    In finibus viverra enim vel suscipit. Quisque consequat velit eu orci
    malesuada, ut interdum tortor molestie. Proin sed pellentesque augue. Nam
    risus justo, faucibus non porta a, congue vel massa. Cras luctus lacus nisl,
    sed tincidunt velit pharetra ac. Duis suscipit faucibus dui sed ultricies.
  </p>
</article>

CSS

html {
  font-family: helvetica, arial, sans-serif;
}

h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  column-span: all;
}

h2 {
  font-size: 1.2rem;
  color: red;
  letter-spacing: 1px;
}

p {
  line-height: 1.5;
  break-after: column;
}

article {
  column-width: 200px;
  gap: 20px;
}

Forcing Page Breaks

In this example, we use break-after: page to force a page break after specific elements, ensuring new content starts on a new page.

HTML

<div class="page-break">
  <h1>Page 1</h1>
  <p>This content will appear on the first page.</p>
</div>

<div class="page-break">
  <h1>Page 2</h1>
  <p>This content will appear on the second page.</p>
</div>

<div class="page-break">
  <h1>Page 3</h1>
  <p>This content will appear on the third page.</p>
</div>

CSS

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

Controlling Column Breaks

In this example, we use break-after: column to control column breaks in a multi-column layout.

HTML

<div class="multi-column">
  <h1>Multi-Column Layout</h1>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
  <p class="break-after-column">This paragraph will force a column break.</p>
  <p>This is the fourth paragraph, starting in a new column.</p>
</div>

CSS

.multi-column {
  column-width: 200px;
  gap: 20px;
}

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

Browser Compatibility

The break-after property is widely supported across modern web browsers:

• Google Chrome: Full support for all values.
• Mozilla Firefox: Partial support for some values.
• Safari: Partial support for some values.
• Microsoft Edge: Full support for all values.
• Opera: Full support for all values.
• Internet Explorer: Limited support for some values.

For older browsers, use the page-break-after property as an alias for the break-after property to ensure backward compatibility.

Page-Break-After vs Break-After

Note: The always value in page-break-* was implemented by browsers as a page break, not a column break. So, it’s mapped to page instead of always in the newer spec.

See Also

To learn more about the break-after property, check out these resources:

• Multiple-column Layout: Learn how to create multi-column layouts and use break-after effectively. ( WebsiteUrl )
• Breaking Boxes With CSS Fragmentation: A guide on CSS fragmentation and using break-after in different contexts. ( WebsiteUrl )
• CSS Fragmentation Module Level 3: The official spec for the CSS Fragmentation Module, which defines break-after. ( WebsiteUrl )
• CSS Regions Module Level 1: The official spec for the CSS Regions Module, which introduces CSS regions and defines break-after for managing breaks within region flows. ( WebsiteUrl )
• CSS Multi-column Layout Module Level 1: The official spec for the CSS Multi-column Layout Module, detailing how to lay out content in multiple columns and use break-after to manage column breaks. ( WebsiteUrl )