語法
段落前分割break-before
Controlling how page, column, or region breaks should occur before the specified element.
Overview
| Class | Declarations |
|---|---|
break-before:value | break-before: value;
|
break-before:auto | break-before: auto;
|
break-before:avoid | break-before: avoid;
|
break-before:avoid-column | break-before: avoid-column;
|
break-before:avoid-page | break-before: avoid-page;
|
break-before:column | break-before: column;
|
break-before:left | break-before: left;
|
break-before:page | break-before: page;
|
break-before:recto | break-before: recto;
|
break-before:revert | break-before: revert;
|
break-before:right | break-before: right;
|
break-before:verso | break-before: verso;
|
Basic usage
Set the break before behavior
Use break-before:value to set how breaks should behave before 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-before: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-before:auto:hover break-before:auto@sm break-before:auto@dark break-before:auto@print">…</div>