Break Before break-before-*

Control how column or page breaks behave before an element. Ensure proper content flow and layout structure.

Quick Reference

break-before-auto

Default behavior

break-before-avoid

Avoid breaks

break-before-all

Force break

break-before-page

Page break

Interactive Examples

Break Before Auto (Default)

This is regular content that flows naturally. The browser determines where column breaks should occur.

Auto Break Section

This section uses break-before-auto, allowing natural break behavior before this element.

Content continues to flow naturally after the auto break section. The placement depends on available space and content length.

Following Content

This content follows normal flow rules.

<div class="break-before-auto">
  Natural break behavior
</div>

Break Before Avoid

This content should stay together with the following section because we're avoiding breaks before it.

Important Section

This section uses break-before-avoid to stay close to the previous content.

Notice how this section tries to stay in the same column as the content above, creating better content cohesion.

Related Content

This demonstrates improved content flow.

<div class="break-before-avoid">
  Avoid breaks before this
</div>

Break Before All (Force Break)

This content appears before the forced break. Even if there's space remaining, the next section will start in a new column.

New Chapter

This section forces a break before it using break-before-all.

This content appears after the forced break, starting fresh in a new column regardless of available space.

Continued Content

Content continues in the new column.

<div class="break-before-all">
  Force break before this
</div>

Chapter Structure Example

Chapter 1: Introduction

This is the end of the first chapter with some concluding thoughts and summary.

Chapter 2: Getting Started

This chapter starts on a new page when printed, using break-before-page.

The chapter structure is maintained both on screen and in print, ensuring proper document organization.

<section class="break-before-page">
  New chapter (print)
</section>

Practical Examples

Article Layout

Web design has evolved significantly over the past decade, with new technologies and methodologies emerging regularly.

Key Principles

Modern web design focuses on user experience, accessibility, and performance optimization as core principles.

Best Practices

Responsive design, semantic HTML, and progressive enhancement remain fundamental to creating robust web experiences.

<h4 class="break-before-avoid">Section Title</h4>
<p>Related content stays together</p>

Card Layout Control

Feature Card 1

This card flows naturally in the column layout.

Important Card

This card forces a new column to ensure prominence.

Feature Card 3

This card continues in the new column.

<div class="break-before-all">
  Important card in new column
</div>

Common Use Cases

📖 Chapter Headings

Force new chapters to start in fresh columns or pages.

<h2 class="break-before-page">

🏷️ Section Headers

Keep section headers with their content using avoid.

<h3 class="break-before-avoid">

🎯 Featured Content

Ensure important content gets its own column space.

<aside class="break-before-all">

Best Practices

✅ Do

  • • Use break-before-avoid for headings
  • • Apply break-before-page for chapters
  • • Test with different content lengths
  • • Consider both digital and print layouts
  • • Use strategically for better readability

❌ Don't

  • • Overuse forced breaks unnecessarily
  • • Apply to every heading element
  • • Ignore responsive considerations
  • • Use without testing print output
  • • Forget about content flow

Related Break Classes

break-after-*

After breaks

break-before-*

Current page

break-inside-*

Inside breaks