CSS break-inside Property

Definition and Usage

The break-inside property sets how a page, column, or region break should behave inside an element’s box. If the element does not generate a box, the property is ignored.

Unlike break-before and break-after, it has no forced-break keywords. You only allow or avoid breaks within the box. It applies to block-level elements, is not inherited, and starts at auto.

CSS Syntax

There is also avoid-region for CSS Regions. Start with auto and avoid.

Property Values

How to Use break-inside

Put avoid on the box you want to keep whole in print or multi-column layout.

1. Find the block that must stay together (figure, card, table, or list item).
2. For columns, wrap content in a multi-column container (column-count or columns).
3. Set break-inside: avoid (or avoid-column / avoid-page) on that block.
4. Test in Print Preview for page media, and in a multi-column layout for columns.

Live Preview

Two cards in a multi-column article. Toggle break-inside. With avoid, each card tries to stay in one column.

CSS Examples

Each snippet focuses on break-inside. Use Try It Yourself for a live editor.

<style>
  article {
    column-count: 3;
  }

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

<article>
  <p>Text before.</p>
  <figure>
    <p>Image</p>
    <figcaption>Caption stays with the image.</figcaption>
  </figure>
  <p>Text after.</p>
</article>

<style>
  article {
    column-count: 3;
  }

  .card {
    break-inside: avoid-column;
  }
</style>

<article>
  <div class="card">
    <h2>Card</h2>
    <p>Keep this block in one column.</p>
  </div>
</article>

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

<div class="section">
  <h2>Heading</h2>
  <p>Body that should stay with the heading when printed.</p>
</div>

Key Takeaways