Layout

Break Inside

Style syntax for controlling how page, column, or region breaks should occur within the specified element.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
break-inside:valuebreak-inside: value
break-inside:autobreak-inside: auto
break-inside:avoidbreak-inside: avoid
break-inside:avoid-columnbreak-inside: avoid-column
break-inside:avoid-pagebreak-inside: avoid-page
break-inside:revertbreak-inside: revert

Basic usage

Set the break inside behavior

Use break-inside:value to set how breaks should behave inside a generated box.

  • 1
  • 2
  • 3
  • 4
<ul class="cols:2">
<li class="h:90">1</li>
<li class="h:70 break-inside:avoid">2</li>
<li class="h:90">3</li>
<li class="h:40">4</li>
</ul>

Before setting the break-inside:avoid, the item is break within the list. It looks like this:

  • 1
  • 2
  • 3
  • 4
<ul class="cols:2">
<li class="h:90">1</li>
<li class="h:70">2</li>
<li class="h:90">3</li>
<li class="h:40">4</li>
</ul>

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="break-inside:avoid:hover break-inside:avoid@sm break-inside:avoid@dark break-inside:avoid@print"></div>
PREVIOUS
Break Before

Style syntax for controlling how page, column, or region breaks should occur before the specified element.

NEXT
Clear

Style syntax for moving an element below floating elements instead of floating to the left or right.

MIT License © Aoyue Design LLC.