CSS break-inside Property

CSS break-inside Property

The break-inside property in CSS controls how breaks (like page, column, or section breaks) are handled inside a block element. It can be useful for controlling layout breaks, especially when working with multi-column layouts or when printing documents.

1. Syntax

selector {
  break-inside: value;
}

Value	Description
auto (default)	Allows normal behavior, where breaks inside the element are handled automatically.
avoid	Prevents any breaks (e.g., page, column) from occurring inside the element.
avoid-page	Prevents breaks inside the element when printing (e.g., page break).
avoid-column	Prevents column breaks inside the element.

2. Example – Avoiding Breaks in a Multi-Column Layout

div {
  column-count: 3;
  break-inside: avoid;
}

<div>
  <p>This is a long paragraph that will not break in the middle.</p>
  <p>This is another paragraph.</p>
</div>

✅ Prevents the columns from splitting the content inside the <div>.

3. Example – Preventing Page Breaks in Print Layouts

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

✅ Ensures that the content inside  <div> doesn’t break across pages when printing.

4. Example – Preventing Column Breaks

div {
  column-count: 2;
  break-inside: avoid-column;
}

✅ Prevents the text inside the <div> from breaking into two columns.

5. Best Practices

✔ Use break-inside: avoid for long content that should stay in one block, like images or paragraphs.
✔ The break-inside property is especially useful in multi-column layouts, printed materials, or pagination.
✔ Ensure you test across different devices and media types (e.g., print) for optimal user experience.