語法
段落後分割break-after
Controlling how page, column, or region breaks should occur after an element.
Overview
| Class | Declarations |
|---|---|
break-after:value | break-after: value;
|
break-after:auto | break-after: auto;
|
break-after:avoid | break-after: avoid;
|
break-after:avoid-column | break-after: avoid-column;
|
break-after:avoid-page | break-after: avoid-page;
|
break-after:column | break-after: column;
|
break-after:left | break-after: left;
|
break-after:page | break-after: page;
|
break-after:recto | break-after: recto;
|
break-after:revert | break-after: revert;
|
break-after:right | break-after: right;
|
break-after:verso | break-after: verso;
|
Basic usage
Set the break after behavior
Use break-after:value to set how breaks should behave after a generated box.
Briefs
A content brief is a document that outlines the key details of a piece of content. It should include an overview of the project, a well as any specific instructions or requirements.
Animals
There are a wide variety of animals in the world, and each one has its own unique set of characteristics and habits.
<div class="cols:2"> <h3>Briefs</h3> <p>A content brief is a document …</p> <hr class="break-after:column" /> <h3>Animals</h3> <p>There are a wide variety of animals in the world …</p></div>Conditionally apply
Apply styles based on different states using selectors and applying conditionally.
<div class="break-after:auto:hover break-after:auto@sm break-after:auto@dark break-after:auto@print">…</div>