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
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>