How to Use CSS break-inside: avoid for Print

The CSS properties break-inside: avoid and its legacy equivalent page-break-inside: avoid dictate how elements split across printed pages or multi-column layouts. When generating a printout or saving a web page as a PDF, browsers often split HTML elements—such as images, table rows, or text containers—awkwardly across two physical pages. Applying these properties instructs the browser's print engine to keep the target element intact on a single page, pushing the entire block to the next page if there is insufficient vertical space left on the current one.

The Problem: Default Page Fragmentation

By default, print engines render web pages as continuous flows of content and segment them into page-sized slices. Without explicit fragmentation rules, an element positioned near the bottom margin of a printed page will be sliced in half. This leads to common layout defects:

• Half of an image printing on page 1 and the other half on page 2.
• A single line of a table row separating from the rest of the row.
• Card-based components, callout boxes, and blockquotes tearing across the page fold.

Modern vs. Legacy Syntax

To ensure maximum compatibility across both modern and legacy browsers, developers commonly use both syntax variants:

• page-break-inside: avoid;: The legacy property introduced in CSS 2.1. It applies specifically to paged media (printing and PDF export).
• break-inside: avoid;: The modern replacement defined in the CSS Fragmentation Module Level 3. It works across paged media, CSS multi-column layouts, and regions.

To achieve robust cross-browser and print-engine compatibility, include both declarations:

@media print {
  .keep-together {
    page-break-inside: avoid; /* Legacy browsers / older PDF engines */
    break-inside: avoid;      /* Modern browsers */
  }
}

Common Use Cases

1. Cards and Widgets

Component-based layouts (such as product listings, user profiles, or dashboard widgets) should generally remain unified.

@media print {
  .card,
  .widget,
  .callout-box {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

2. Table Rows

Tables spanning multiple pages frequently break mid-row, resulting in unreadable text. Preventing breaks inside table rows ensures that data lines stay legible:

@media print {
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

3. Media Elements and Code Snippets

Figures, captions, charts, and preformatted code blocks are difficult to interpret when divided across pages:

@media print {
  figure,
  pre,
  blockquote {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

Important Limitations

While break-inside: avoid is a critical tool for print stylesheets, keep the following constraints in mind:

• Elements Taller Than One Page: If an element is taller than the printable area of a single page, the browser cannot satisfy the avoid instruction. In this scenario, the engine ignores the rule and splits the element as needed to prevent content loss.
• Flexbox and Grid Contexts: Some older browser engines and headless PDF generators struggle to calculate page breaks reliably inside display: flex or display: grid containers. If break-inside: avoid fails to work inside these containers, switching elements to display: block within the @media print stylesheet often resolves the issue.
• Aggressive Whitespace Creation: Pushing large containers to the next page can leave noticeable gaps at the bottom of the preceding page. Apply the rule selectively to essential atomic components rather than high-level container wrappers.