Why Fragmentation Control Matters
Modern web design frequently uses multi-column layouts for article text, newspaper-style presentations, and responsive designs that adapt to wider screens. Without proper fragmentation control, browsers may break content in awkward places--splitting a paragraph mid-sentence, separating a heading from its following content, or creating single lines of text (widows) that look disconnected from the surrounding material. Similarly, when users print web pages, uncontrolled page breaks can leave headings stranded at the bottom of one page with their content beginning on the next, or split tables and images in ways that reduce readability.
The break-after property, along with its companion properties break-before and break-inside, provides the tools to address these challenges. By explicitly defining break behavior at specific points in your content, you create more polished, professional layouts that maintain visual coherence across different output contexts. Our /services/web-development/ team applies these CSS techniques to create seamless reading experiences across all devices and output formats.
Syntax and Values
The break-after property accepts a range of values that determine whether and what type of break occurs after an element. Understanding these values and their contexts is essential for applying the property effectively.
1/* Generic break values */2break-after: auto;3break-after: avoid;4break-after: always;5break-after: all;6 7/* Page break values */8break-after: avoid-page;9break-after: page;10break-after: left;11break-after: right;12break-after: recto;13break-after: verso;14 15/* Column break values */16break-after: avoid-column;17break-after: column;18 19/* Region break values */20break-after: avoid-region;21break-after: region;Generic Break Values
Generic values work across all fragmentation contexts, regardless of whether you're dealing with columns, pages, or regions.
auto
Default value. The browser may insert a break but is not forced to do so, allowing natural fragmentation based on available space.
avoid
Prevents any break after the element if possible, keeping related content together across fragmentation boundaries.
always
Forces a break after the element. The break type depends on the containing context (column in multi-column layouts, page in paged media).
all
Forces a page break after the element, breaking through all nested fragmentation contexts when used in complex layouts.
Page Break Values
Page-specific values only take effect in paginated contexts, such as printed documents or PDF exports.
avoid-page
Prevents a page break after the element when possible, keeping headings with following content in print layouts.
page
Forces a page break after the element, ensuring content begins on a new page for chapters or major sections.
left
Forces one or two page breaks to ensure the next page is a left-hand page for book-style layouts.
right
Forces one or two page breaks to ensure the next page is a right-hand page for professional section starts.
Column and Region Break Values
Column-specific values apply within multi-column containers; region-specific values handle content flowing across linked regions.
avoid-column
Prevents a column break after the element in multi-column layouts, keeping related content together across columns.
column
Forces a column break after the element, ensuring content begins in a new column for clear section separation.
avoid-region
Prevents a region break after the element when content flows across multiple linked regions.
region
Forces a region break after the element, ensuring content begins in the next region.
How Break Properties Interact
Understanding how break-after works requires recognizing that breaks are determined by three properties working together: the break-after value of the previous element, the break-before value of the next element, and the break-inside value of the containing element. For comprehensive fragmentation control, pair break-after with its companion properties--use the /resources/docs/web-development/break-inside/ property to prevent breaks within elements and the /resources/docs/web-development/break-before/ property to control breaks before elements.
Priority System:
-
Forced breaks take precedence: If any property specifies a forced break (always, left, right, page, column, or region), that wins. If multiple forced breaks exist, the latest element in the flow takes priority:
break-before>break-after>break-inside. -
Avoid values prevent breaks: If any property specifies an avoid value, no break will be inserted at that point, even if the browser would normally want to add one.
-
Soft breaks fill space: After forced breaks, the browser may add soft breaks to fill available space, but never on boundaries marked with avoid values.
Multi-Column Layout Examples
For multi-column layouts, applying break-after prevents headings from being separated from their content and creates clear section boundaries.
1/* Keep headings connected to following content */2.article-section h2 {3 break-after: avoid;4}5 6/* Create clear section boundaries */7.section-divider {8 break-after: column;9}10 11/* Multi-column layout with proper fragmentation */12.magazine-layout {13 column-count: 3;14 column-gap: 2rem;15}16 17.magazine-layout article {18 break-inside: avoid;19}20 21.magazine-layout h2 {22 break-after: avoid;23}Print Media Considerations
For print-specific styles, wrap your break-after rules in a print media query to create professional, book-quality printed output. Proper print stylesheets also contribute to a professional brand experience when users save pages as PDF or print content for offline reading.
1@media print {2 /* Keep headings with following content */3 h1, h2, h3, h4, h5, h6 {4 break-after: avoid;5 orphans: 3;6 widows: 3;7 }8 9 /* Keep figures and captions together */10 .figure {11 break-after: avoid;12 break-inside: avoid;13 }14 15 /* Start chapters on new pages */16 .chapter-opening {17 break-after: page;18 }19 20 /* Section breaks for book-style layout */21 .section-break {22 break-after: right; /* Right-hand (verso) pages */23 }24}Legacy Property Compatibility
The break-after property modernizes and extends the older page-break-after property from CSS 2.1. For backward compatibility, browsers treat page-break-after as an alias for break-after.
Value Mappings:
auto→autoleft→leftright→rightavoid→avoidalways→page(notalways)
For new development, prefer the modern break-after property. It provides consistent behavior across different fragmentation contexts and uses a unified syntax for columns, pages, and regions.
Best Practices
What elements can I apply break-after to?
Apply break-after to block-level elements only. The property has no effect on inline elements or generated content without a block-level box.
How is break-after different from page-break-after?
break-after is the modern, unified property that handles columns, pages, and regions. page-break-after is the legacy property that only handles page breaks. For new code, use break-after.
Should I use avoid values on all my headings?
Use avoid values sparingly. While they keep content together, overuse can prevent browsers from creating balanced layouts, leading to excessive white space.
Do column breaks work on mobile?
Multi-column layouts often collapse to single columns on narrow screens. Test responsive breakpoints to ensure fragmentation rules adapt appropriately.
Sources
- MDN Web Docs - break-after - Comprehensive official documentation with interactive examples, formal syntax, and browser compatibility data.
- Quackit - CSS break-after - Technical reference covering all specification contexts and practical code examples.
- W3Schools - CSS break-after Property - Practical examples and easy-to-understand explanations of values.