Tag page-break-inside

📄 CSS page-break-inside — Keeping Content Together on Printed Pages

Prevent awkward breaks inside your elements for smooth, readable print layouts.

When preparing content for print from web pages, one common frustration is elements breaking in the middle, splitting tables, images, paragraphs, or cards across pages. The CSS property page-break-inside gives you control to avoid or allow page breaks inside an element during printing.

🔹 What is page-break-inside?

page-break-inside controls whether a page break is allowed inside a block-level element when printing.

  • Setting it to avoid tries to keep the entire element together on one page.
  • Setting it to auto allows page breaks inside the element as needed.

📘 Syntax

selector {
  page-break-inside: value;
}

Common values:

ValueDescription
autoDefault — page breaks allowed inside element
avoidAvoid page breaks inside the element if possible

✍️ Example: Avoid Breaking a Table Across Pages

<table class="no-break">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
</table>
@media print {
  .no-break {
    page-break-inside: avoid;
  }
}

🖨️ This attempts to keep the whole table on one page when printing.

🖼️ Image 1: Table Split vs. Table Kept Together

Description:

  • Left: A table broken across two pages with half the rows on page 1 and the rest on page 2.
  • Right: Same table kept fully on page 1 due to page-break-inside: avoid.

🎯 Purpose: Visualize the difference in print layout and readability.

🆚 page-break-inside vs page-break-before/after

PropertyWhat it controls
page-break-beforeBreak before an element
page-break-afterBreak after an element
page-break-insideBreak inside an element

🧠 Tips for Use

  • Use on containers like tables, images, cards, or any content block that looks bad when split.
  • Not all browsers perfectly honor page-break-inside: avoid especially on complex elements.
  • Combine with page-break-before and page-break-after for best control.

🖼️ Image 2: Card Layout with and without page-break-inside

Description:

  • Left: Cards split awkwardly between pages.
  • Right: Cards stay whole on one page, thanks to page-break-inside: avoid.

🔄 Modern Alternative: break-inside

CSS3’s break-inside is the modern property that replaces page-break-inside for all media:

@media print {
  .no-break {
    break-inside: avoid;
  }
}

Use break-inside for broader compatibility and future-proofing.

✅ Summary

  • page-break-inside controls if page breaks can split an element.
  • Use avoid to keep elements intact on printed pages.
  • Works best for tables, images, cards, paragraphs, etc.
  • Always test print results in multiple browsers.
  • Use @media print to apply only during printing.

🔚 Final Thought

Good print design means content stays readable and visually consistent. The simple addition of page-break-inside: avoid helps you keep tables, cards, and other blocks together, eliminating ugly page splits and improving the printed experience.