CSS page-break-inside Property

Definition and Usage

The page-break-inside property adjusts page breaks inside the current element in print and other paged media. Use it to keep a table, figure, or card from splitting awkwardly across two pages.

It is not inherited. The initial value is auto. Pair it with page-break-before and page-break-after in older print stylesheets.

CSS Syntax

Unlike page-break-before, there is no always, left, or right here—only whether a break inside the box is allowed.

Property Values

How to Use page-break-inside

Use it on blocks that should stay whole on one printed page, or migrate the rule to break-inside.

1. Pick the block that should not split (table, figure, card, short list).
2. Set page-break-inside: avoid on that element.
3. Check the result in Print Preview (Ctrl+P / Cmd+P).
4. For new CSS, rewrite as break-inside: avoid.

Live Preview

Screen layout cannot show real print pages. This demo simulates a split inside the marked box when you choose auto, and keeps the box whole when you choose avoid.

CSS Examples

Each snippet focuses on page-break-inside. Confirm with Print Preview. Use Try It Yourself for a live editor.

<style>
  .figure {
    page-break-inside: avoid;
  }
</style>

<div class="figure">
  <p>Caption and image stay together.</p>
  <p>Prefer one page for this block.</p>
</div>

<style>
  .article {
    page-break-inside: auto;
  }
</style>

<div class="article">
  <p>Long text may continue on the next page.</p>
  <p>A break inside is allowed.</p>
</div>

<style>
  table {
    page-break-inside: avoid;
  }
</style>

<table border="1">
  <tr><th>Item</th><th>Qty</th></tr>
  <tr><td>Pens</td><td>12</td></tr>
  <tr><td>Paper</td><td>50</td></tr>
</table>

Key Takeaways