語法
段落內分割break-inside
Controlling how page, column, or region breaks should occur within the specified element.
Overview
| Class | Declarations |
|---|---|
break-inside:value | break-inside: value;
|
break-inside:auto | break-inside: auto;
|
break-inside:avoid | break-inside: avoid;
|
break-inside:avoid-column | break-inside: avoid-column;
|
break-inside:avoid-page | break-inside: avoid-page;
|
break-inside:revert | break-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>