版面
段落內分割break-inside
Controlling how page, column, or region breaks should occur within the specified element.
Overview
| Class | Declarations |
|---|---|
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;
|
break-inside:<value> | break-inside: <value>;
|
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="columns:2"> <li class="h:90px">1</li> <li class="h:70px break-inside:avoid">2</li> <li class="h:90px">3</li> <li class="h:40px">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="columns:2"> <li class="h:90px">1</li> <li class="h:70px">2</li> <li class="h:90px">3</li> <li class="h:40px">4</li></ul>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="break-inside:avoid:hover break-inside:avoid@sm break-inside:avoid@dark break-inside:avoid@print">…</div>