Break Inside break-inside-*
Control how column or page breaks behave within an element. Keep content together or allow natural breaking.
Quick Reference
break-inside-autoDefault behavior
break-inside-avoidAvoid breaks
break-inside-avoid-pageAvoid page breaks
break-inside-avoid-columnAvoid column breaks
Interactive Examples
Break Inside Auto (Default)
Auto Break Box
This box uses break-inside-auto, which allows the browser to break this content across columns if needed for optimal layout.
The content can be split naturally between columns when there's insufficient space in the current column.
Regular paragraph content that flows around the breakable box above. Notice how the layout adapts based on available space.
Another Section
This content continues the natural flow.
<div class="break-inside-auto">
Content can break naturally
</div> Break Inside Avoid
This content flows naturally and can break across columns as needed for optimal layout balance.
Unbreakable Card
This card uses break-inside-avoid to ensure it stays together as a complete unit within a single column.
The entire card content will move to the next column if there isn't enough space to fit it completely.
Content after the unbreakable card continues to flow naturally, demonstrating how break control affects layout.
<div class="break-inside-avoid">
Keep this content together
</div> Card Grid Layout
Feature Card 1
This card stays together as a unit.
- • Feature point one
- • Feature point two
- • Feature point three
Feature Card 2
Another complete card unit.
- • Different feature
- • Another benefit
Feature Card 3
Third card in the layout.
Feature Card 4
Final card demonstrating the layout.
<div class="break-inside-avoid">
Complete card content
</div> Print Layout Control
When designing for print, break-inside control becomes crucial for maintaining content integrity across pages.
Important Notice
This notice uses break-inside-avoid-page to ensure it doesn't split across printed pages.
Critical information that must stay together when printed.
Column-Specific Control
This section avoids column breaks specifically, useful for multi-column print layouts.
<div class="break-inside-avoid-page">
Don't break across pages
</div> Break Behavior Comparison
With break-inside-auto
Breakable Content
This content can be split across columns if needed. The browser will break it naturally to optimize the layout.
Notice how this might appear split between columns depending on available space and content length.
Additional content flows around the breakable element above.
Content may split between columns With break-inside-avoid
Protected Content
This content stays together as a complete unit. It will move to the next column entirely if there isn't enough space.
The entire box remains intact, maintaining content cohesion and readability.
Additional content flows around the protected element above.
Content stays together as a unit Common Use Cases
🎴 Content Cards
Keep card content together for better visual cohesion.
<div class="break-inside-avoid"> 📋 Form Sections
Prevent form fields from splitting across columns.
<fieldset class="break-inside-avoid"> 🖼️ Image Captions
Keep images with their captions as complete units.
<figure class="break-inside-avoid"> 💬 Testimonials
Ensure testimonials stay together for impact.
<blockquote class="break-inside-avoid"> 📊 Data Tables
Prevent table rows from breaking awkwardly.
<tr class="break-inside-avoid"> 📄 Code Blocks
Keep code examples together for readability.
<pre class="break-inside-avoid"> Best Practices
✅ Do
- • Use
break-inside-avoidfor cards and boxes - • Apply to content that loses meaning when split
- • Test with varying content lengths
- • Consider print layouts when applicable
- • Use for maintaining visual cohesion
- • Apply to form sections and fieldsets
❌ Don't
- • Apply to every element unnecessarily
- • Use on very large content blocks
- • Ignore responsive behavior
- • Forget about content overflow
- • Use when natural breaks are acceptable
- • Apply without testing different screen sizes
Browser Support & Performance
🌐 Browser Support
⚡ Performance Notes
- • Minimal performance impact
- • Works well with CSS columns
- • Efficient for print layouts
- • No JavaScript required
- • Hardware accelerated when possible
- • Responsive-friendly implementation