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