Syntax

Break Inside

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

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 based on different states using selectors and applying conditionally.

<div class="break-inside:avoid:hover break-inside:avoid@sm break-inside:avoid@dark break-inside:avoid@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.