CSS Break Before

Understanding the Break Before Property

The break-before CSS property gives developers precise control over how content breaks across pages, columns, and regions. Whether you're designing print-friendly stylesheets, creating multi-column layouts, or working with CSS regions, understanding how to use break-before effectively ensures your content flows exactly as intended.

When applied to an element, break-before provides instructions for whether to break or prevent breaks between pages, columns, and regions in various media contexts. This property is particularly valuable when you need to ensure headings stay with their associated content, prevent awkward breaks in printed documents, or control how multi-column content flows across column boundaries MDN Web Docs.

The property operates within fragmentation contexts, which include paged media (print stylesheets), multi-column layouts created with CSS columns, and CSS regions. Each context responds differently to the various values available, allowing for granular control over break behavior. The break-before property applies to block-level elements, grid items, flex items, table row groups, and table rows CSS-Tricks.

For modern web projects requiring professional print output or engaging multi-column layouts, mastering break-before is essential. It transforms how content flows across fragmentation boundaries, ensuring your documents look polished whether viewed on screen or printed on paper. Our web development services help businesses implement these advanced CSS techniques for professional results.

Syntax and Value Categories

The break-before property accepts values organized into four categories based on the fragmentation context: generic break values, page break values, column break values, and region break values. Each category serves a specific purpose and applies to different CSS specifications.

Generic Break Values

Generic break values work across all fragmentation contexts and provide the most versatile control:

• auto: The browser's default behavior - allows breaks but doesn't force them. This is the initial value and typically produces acceptable results without explicit intervention.
• avoid: Prevents any break (page, column, or region) from being inserted before the element. Use this when you want to keep related content together.
• always: Forces a break after the element, with the type determined by the containing fragmentation context. In a multi-column layout, this forces a column break; in paged media, it forces a page break MDN Web Docs.
• all: Forces a page break after the element, breaking through all possible fragmentation contexts. This ensures both column and page breaks occur when nested contexts exist CSS-Tricks.

Page Break Values

Page break values specifically control breaks in paged media contexts, such as when printing web pages or generating PDFs:

• avoid-page: Prevents a page break from occurring before the element. Ideal for keeping headings with their following content in print layouts.
• page: Forces a page break before the element. Use this to start new sections or chapters on fresh pages.
• left: Forces one or two page breaks to ensure the next page is a left-facing page. Useful for book-style layouts where specific content must appear on left pages MDN Web Docs.
• right: Similar to left, but forces the next page to be a right-facing page. Essential for double-sided printing layouts.
• recto: Forces page breaks to place the element at the beginning of a recto page (right page in left-to-right spreads, left page in right-to-left spreads).
• verso: Forces page breaks to place the element at the beginning of a verso page (left page in left-to-right spreads, right page in right-to-left spreads).

Column Break Values

Column break values control breaks in multi-column layouts created with CSS columns:

• avoid-column: Prevents a column break before the element, ensuring content stays together within a single column.
• column: Forces a column break before the element, starting the element at the top of the next column.

Region Break Values

Region break values control breaks in CSS regions, which flow content through multiple containers:

• avoid-region: Prevents a region break before the element.
• region: Forces a region break before the element.

Complete Syntax Reference

break-before: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region;

Each value serves a specific purpose, and understanding the context in which each applies helps you choose the right value for your specific use case. Understanding these values is crucial for implementing effective print stylesheets that enhance both user experience and search engine visibility.

Code Examples and Implementation

Print Stylesheet Example

@media print {
 h1 {
 break-before: page;
 }

 h2, h3 {
 break-before: avoid;
 }

 .chapter-start {
 break-before: right;
 }

 table {
 break-inside: avoid;
 }
}

This print stylesheet demonstrates how break-before creates professional document layouts. The break-before: page on h1 elements ensures each major section or chapter title starts on a fresh page, creating clear document divisions. Using break-before: avoid on h2 and h3 headings keeps section titles with their following content, preventing awkward page breaks that separate headings from their sections.

The break-before: right value on .chapter-start elements is particularly useful for book layouts where chapters should begin on right-hand pages. This creates proper book-style formatting with chapters consistently aligned to the right side of two-page spreads. Combined with break-inside: avoid on tables, this ensures tabular data remains intact without getting split across pages.

Multi-Column Layout Example

.article-content {
 column-count: 2;
 column-gap: 2rem;
}

.section-heading {
 break-before: column;
}

.related-content {
 break-before: avoid-column;
 column-span: all;
}

In CSS multi-column layouts, break-before controls how content flows across columns. The break-before: column on .section-heading ensures each new section starts at the top of a fresh column, improving readability by preventing section titles from appearing at the bottom of one column with content continuing in the next. This creates clear visual separations between sections.

The break-before: avoid-column on .related-content prevents the full-width section from being split across columns, ensuring it spans all columns cleanly. Using column-specific values (column, avoid-column) versus generic values (always, avoid) gives you precise control over multi-column behavior CSS-Tricks.

Break Before vs. Related Properties

Understanding how break-before relates to other break properties helps you control layouts more effectively. These three properties work together to create comprehensive break control:

article {
 break-before: page;
}

h1 {
 break-after: avoid;
}

p {
 break-inside: avoid;
}

figure {
 break-before: page;
 break-inside: avoid;
}

The interplay between these properties determines final break behavior. The break-before value of the current element, the break-after value of the previous element, and the break-inside value of the containing element all influence where breaks occur. When break-before and break-after conflict, browsers typically prioritize the more restrictive option to avoid orphaned content.

For complete break control, use all three properties strategically: break-before to control where content starts after a break, break-after to control what comes before a break, and break-inside to protect entire elements from being split. This combination ensures professional-quality layouts in print media and multi-column designs, which is essential for modern web development projects.

Best Practices for Print Stylesheets

Keep Related Content Together

The most important rule for print styles is keeping related content together. Headings should stay with their following paragraphs, figures should remain with their captions, and table rows shouldn't be split across pages. The avoid values are your primary tools for achieving this:

@media print {
 h1, h2, h3, h4, h5, h6 {
 break-after: avoid;
 break-before: avoid;
 }

 figure, table, pre {
 break-inside: avoid;
 }

 figcaption {
 break-before: avoid;
 break-after: avoid;
 }
}

Use Semantic Page Breaks

Rather than forcing arbitrary page breaks, use semantic rules that make sense for your content structure. Chapter titles, major sections, and figures often warrant their own pages:

@media print {
 .chapter-title {
 break-before: page;
 }

 .major-section {
 break-before: page;
 }

 .full-page-image,
 .landscape-table {
 break-before: page;
 break-after: page;
 }
}

Book Layout Considerations

For book-style layouts using double-sided printing, the left and right values ensure content appears on the correct side of two-page spreads. Use break-before: right for chapter beginnings and part titles that should always appear on right-hand pages. The break-before: left value ensures content starts on left pages, which is useful for front matter or appendices.

@media print {
 .chapter {
 break-before: right;
 }

 .part-title {
 break-before: right;
 break-after: page;
 }

 .blank-page {
 break-after: right;
 break-before: left;
 }
}

This approach creates proper book formatting where chapters consistently begin on the correct side of two-page spreads, maintaining professional document structure.

Performance Considerations

The break-before property has minimal performance impact in modern browsers. Since it primarily affects how browsers handle content flow during rendering (especially in print contexts), the overhead is negligible for typical use cases.

Print Performance

When preparing content for print, complex break rules can slightly increase processing time as the browser analyzes content flow. Keep your print styles focused and avoid overly complex break hierarchies. The browser needs to calculate where breaks should occur, and excessive avoid declarations can create scenarios where the browser must backtrack and adjust layouts.

Efficient Rule Writing

Write efficient break rules by applying them at appropriate levels in your HTML structure rather than using overly specific selectors:

/* Inefficient - applying to individual elements */
.article h2:nth-of-type(1),
.article h2:nth-of-type(2),
.article h2:nth-of-type(3) {
 break-before: page;
}

/* Efficient - applying to all headings */
.article h2 {
 break-before: page;
}

Static Exports and Build Performance

For static site generators and cached content, print styles with break-before are computed at build time for print media queries. This means the performance impact is on the build side rather than runtime, which is generally acceptable given the static nature of the output.

To minimize build-time impact, consolidate your break rules into a single print stylesheet rather than scattering them throughout your CSS. This approach reduces the amount of processing the browser needs to perform when generating print output. Leveraging AI-powered automation for your build pipeline can further optimize these processes for complex web projects.

Browser Support and Compatibility

The break-before property has excellent browser support and has been part of the Baseline wide availability set since January 2019 MDN Web Docs. This means the feature works consistently across all major modern browsers without requiring prefixes or fallbacks in most cases.

Current Browser Support

All modern browsers support the property identically, with consistent behavior for all value types including generic, page, column, and region breaks.

Legacy Browser Considerations

For older browsers that don't support break-before, the legacy properties (page-break-before, page-break-after, page-break-inside) provide similar functionality for paged media contexts. While multi-column and region break values won't work in older browsers, print styles using page-related values will still function with fallbacks:

.chapter {
 page-break-before: always;
 break-before: page;
}

h2 {
 page-break-before: avoid;
 break-before: avoid;
}

Feature Detection

While feature detection for CSS properties is generally unnecessary given widespread support, if you need to target very old browsers, you can use the @supports rule for conditional application:

@supports (break-before: page) {
 .section-title {
 break-before: page;
 }
}

@supports not (break-before: page) {
 .section-title {
 page-break-before: always;
 }
}

The legacy page-break-before property is treated as an alias for break-before by modern browsers, but including both ensures graceful degradation W3Schools.

Common Use Cases

Documentation and Reports

Technical documentation and reports often require careful break control to ensure readability:

@media print {
 .documentation-section {
 break-before: page;
 }

 .code-example {
 break-inside: avoid;
 break-before: avoid;
 }

 .toc {
 break-after: page;
 }

 .appendix {
 break-before: page;
 }
}

Each top-level section starts on a new page, code examples remain intact without breaking across pages, and the table of contents flows naturally before major sections begin. This creates professional documentation suitable for PDF export or printing.

Academic Papers

Academic documents require precise control for proper formatting requirements:

@media print {
 .abstract {
 break-before: page;
 break-after: page;
 }

 .chapter-title {
 break-before: right;
 }

 figure, table {
 break-before: page;
 break-inside: avoid;
 }

 .footnotes {
 break-before: avoid;
 }

 .bibliography {
 break-before: page;
 }
}

The abstract gets its own page, chapter titles appear on right-facing pages for book-style formatting, figures and tables start on new pages and stay intact, footnotes remain with their references, and the bibliography begins on a fresh page.

Multi-Column Articles

Web articles using CSS columns benefit from column break control:

.article-body {
 column-count: 3;
 column-gap: 1.5rem;
 column-rule: 1px solid #ddd;
}

.article-title {
 column-span: all;
 break-after: avoid;
}

.section-header {
 break-before: column;
 break-after: avoid;
}

.pull-quote {
 break-before: column;
 break-after: column;
 column-span: all;
 break-inside: avoid;
}

The title spans all columns at the top, section headers start fresh columns, and pull quotes are treated as full-width elements that don't break across columns.

Troubleshooting Common Issues

Breaks Not Taking Effect

If break-before values don't seem to work, check these common issues:

1. Element Type: The property only applies to block-level elements and certain table-related elements. Applying it to inline elements has no effect.

2. Fragmentation Context: The element must be within a fragmentation context (paged media, multi-column layout, or CSS regions) for break properties to function. Check that your container has column-count set for multi-column layouts or that styles are inside a @media print block.

3. Conflicting Rules: Other break properties on the same element or its container can override break-before. Check for break-after on previous elements and break-inside on containers that might conflict.

Inconsistent Behavior Across Browsers

While modern browsers have consistent support, always test across browsers for complex print layouts:

@media print {
 .chapter {
 break-before: page;
 page-break-before: always;
 }

 .section {
 break-before: avoid;
 page-break-before: avoid;
 }
}

Content Pushing to New Pages Unexpectedly

When content unexpectedly starts new pages, review your avoid declarations. Excessive break-before: page declarations on container elements can override break-before: avoid on child elements:

/* Before (problematic) */
section {
 break-before: page;
}

h2 {
 break-before: avoid;
}

/* After (correct) */
section {
 /* Don't force page breaks on all sections */
}

h2 {
 break-before: page;
}

The key is to apply break-before at the appropriate level in your HTML structure. Force breaks on elements that should start new pages rather than preventing breaks on containers that shouldn't.

Summary

The break-before CSS property provides essential control over content fragmentation in print media, multi-column layouts, and CSS regions. By understanding the various values--generic (auto, avoid, always, all), page-specific (avoid-page, page, left, right, recto, verso), column-specific (avoid-column, column), and region-specific (avoid-region, region)--developers can create polished print stylesheets and well-structured multi-column layouts.

Key takeaways:

• Use avoid values to keep related content together--headings with content, figures with captions, tables intact
• Employ page and column values for forced breaks at appropriate points in your content
• Leverage left/right values for book-style layouts in double-sided printing
• Include legacy page-break-before fallbacks for older browser support
• Test print styles in actual print preview dialogs, as some browsers handle print rendering differently

The combination of break-before, break-after, and break-inside provides complete control over content fragmentation, enabling professional-quality printed documents from web content. With excellent browser support since 2019, break-before is a reliable tool for any web developer working with print styles or multi-column content.

Sources

1. MDN Web Docs - break-before - Primary reference for property definition, values, and browser support data
2. CSS-Tricks - break-before - Practical examples and demos for implementation
3. W3Schools - page-break-before - Legacy property documentation for backward compatibility context