Break After break-after-*
Control how column or page breaks behave after an element. Force or prevent breaks to optimize layout flow.
Quick Reference
break-after-autoDefault behavior
break-after-avoidAvoid breaks
break-after-allForce break
break-after-pagePage break
Interactive Examples
Break After Auto (Default)
Section 1
This section uses break-after-auto, allowing natural break behavior after this element.
Content flows naturally after the previous section. The browser decides where to place column breaks based on available space and content.
Section 2
Another section that follows normal flow rules.
This demonstrates the default behavior where breaks occur naturally based on content length and column constraints.
<div class="break-after-auto">
Natural break behavior
</div> Break After Avoid
Important Section
This section uses break-after-avoid to prevent column breaks immediately after it.
This content should stay close to the previous section because we've avoided breaks after the important section above.
Related Content
This stays together with the previous section.
Notice how the content flows more cohesively when breaks are strategically avoided.
<div class="break-after-avoid">
Avoid breaks after this
</div> Break After All (Force Break)
Chapter 1
This section forces a break after it using break-after-all.
This content appears after the forced break. Notice how it starts in a new column even if there was space in the previous column.
Chapter 2
New chapter starting in a fresh column.
Forced breaks are useful for creating clear separations between major content sections.
<div class="break-after-all">
Force break after this
</div> Print Layout Control
Document Title Page
This section uses break-after-page for print layouts, ensuring content starts on a new page.
Main Content
This content would appear on the next page when printed, creating clear document structure.
<div class="break-after-page">
Page break after this (print)
</div> Common Use Cases
📄 Document Sections
Force breaks after major sections like chapters or appendices.
<section class="break-after-page"> 🏷️ Content Cards
Prevent breaks after important cards to keep related content together.
<div class="break-after-avoid"> 📰 Article Headers
Ensure article headers stay with their content.
<header class="break-after-avoid"> Best Practices
✅ Do
- • Use
break-after-avoidfor headers and titles - • Apply
break-after-pagefor print layouts - • Test break behavior with varying content lengths
- • Consider both screen and print media
- • Use sparingly to maintain natural flow
❌ Don't
- • Overuse forced breaks (break-after-all)
- • Apply to every element unnecessarily
- • Ignore responsive behavior
- • Use without testing print layouts
- • Forget about browser compatibility