CSS break-inside Property

CSS break-inside Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The break-inside property controls whether a user-agent may insert a fragmentation break (for example a column break, page break, or region break) inside a box. It is used to keep atomic pieces of content - such as figures, images, code blocks, cards, or table rows - together rather than allowing them to be split awkwardly across columns or pages. In practical layout work, applying break-inside to a block-level container tells the rendering engine to avoid chopping that element in two when flowing content into multiple fragments.

This property interacts with the broader fragmentation model of CSS. In multi-column layouts it affects how content flows between column boxes created by properties like column-count, while in paged media it affects where page breaks may fall. It also works together with the per-edge manual break properties - for example, you can influence break placement around an element with break-before and break-after while using break-inside to avoid breaking the element itself.

There are important practical and edge-case behaviors to be aware of. User agents will generally honor the avoidance of internal breaks, but they may still break an element when it is larger than a single fragment (if the content cannot otherwise fit), and some complex element types (table rows, floats, absolutely positioned boxes) have special handling. Also, preventing breaks inside many adjacent elements can lead to large gaps or unexpected whitespace because the engine must find a place to break elsewhere; for this reason, it’s often useful to combine break control with careful content sizing and container design.

Definition

Initial value: auto
Applies to: Block level elements
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.breakInside

Syntax

break-inside: auto | avoid | avoid-page | avoid-column

Values

autoA page/column/region break is determined by the flow of content.
avoidA page/column/region break is not allowed within the content block.
avoid-pageA page break is not allowed within the content block.
avoid-columnA column break is not allowed within the content block.
avoid-regionA region break is not allowed within the content block.
inherit

Example

HTML

<div class="container">

  <h1>break-inside: avoid example</h1>

  <p class="intro">This demonstrates preventing elements from breaking across columns or pages.</p>

  <div class="columns">

    <article class="card">

      <h2>Card 1</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>

    </article>

    <article class="card">

      <h2>Card 2</h2>

      <p>Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>

    </article>

    <article class="card">

      <h2>Card 3</h2>

      <p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>

    </article>

    <div class="group">

      <h2>Grouped Content</h2>

      <p>This group should not be split between columns. It contains multiple paragraphs that stay together.</p>

      <p>Second paragraph in the group to illustrate longer content.</p>

    </div>

    <article class="card">

      <h2>Card 4</h2>

      <p>Fusce nec tellus sed augue semper porta. Mauris massa.</p>

    </article>

    <article class="card">

      <h2>Card 5</h2>

      <p>Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent.</p>

    </article>

  </div>

</div>

CSS

/* Basic page styles */
body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 24px;
  background: #f7f9fb;
  color: #222;
}

/* Center container */
.container {
  max-width: 900px;
  margin: 0 auto;
}

/* Multi-column layout */
.columns {
  column-count: 3;
  column-gap: 20px;
}

/* Prevent cards and grouped blocks from breaking inside columns/pages */
.card,
.group {
  background: #fff;
  padding: 12px;
  margin: 0 0 18px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  /* Compatibility fallbacks */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Slight visual variation for grouped content */
.group {
  background: linear-gradient(180deg, #eaf4ff, #fff);
}

/* Headings and intro */
h1 {
  font-size: 20px;
  margin: 0 0 12px;
}

h2 {
  font-size: 16px;
  margin: 0 0 8px;
}

.intro {
  margin: 0 0 16px;
  color: #555;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS break-inside property. Hover over a browser icon to see the version that first introduced support for this CSS property.