break-before

break-before

用于控制列或页面应如何在元素之前中断的实用工具。

类名样式

类名	样式
`break-before-auto`	`break-before: auto;`
`break-before-avoid`	`break-before: avoid;`
`break-before-all`	`break-before: all;`
`break-before-avoid-page`	`break-before: avoid-page;`
`break-before-page`	`break-before: page;`
`break-before-left`	`break-before: left;`
`break-before-right`	`break-before: right;`
`break-before-column`	`break-before: column;`

break-before-auto

break-before: auto;

break-before-avoid

break-before: avoid;

break-before-all

break-before: all;

break-before-avoid-page

break-before: avoid-page;

break-before-page

break-before: page;

break-before-left

break-before: left;

break-before-right

break-before: right;

break-before-column

break-before: column;

示例

基本示例

使用类似 break-before-column 和 break-before-page 这样的实用工具来控制列或分页符应如何在元素之前表现

<div class="columns-2">
  <p>Well, let me tell you something, ...</p>
  <p class="break-before-column">Sure, go ahead, laugh...</p>
  <p>Maybe we can live without...</p>
  <p>Look. If you think this is...</p>
</div>

响应式设计

前缀a break-before 实用工具带有断点变体，例如 md:，仅在以下情况下应用该实用工具中等屏幕尺寸及以上

<div class="break-before-column md:break-before-auto ...">
  <!-- ... -->
</div>

了解更多关于在变体文档中使用变体的信息。

示例

基本示例

响应式设计

在此页