Lzh on GitHub

break-before

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

快速参考

类名样式
break-before-autobreak-before: auto;
break-before-avoidbreak-before: avoid;
break-before-allbreak-before: all;
break-before-avoid-pagebreak-before: avoid-page;
break-before-pagebreak-before: page;
break-before-leftbreak-before: left;
break-before-rightbreak-before: right;
break-before-columnbreak-before: column;

示例

基本示例

使用 break-before-columnbreak-before-page 等工具类控制列或分页符在元素之前应如何表现:

<div class="columns-2">
  <p>好吧,我来告诉你一些事情,...</p>
  <p class="break-before-column">当然,继续笑吧...</p>
  <p>也许我们可以没有...</p>
  <p>听着。如果你认为这是...</p>
</div>

响应式设计

break-before 工具类添加断点变体的前缀(如 md:),以便仅在中等屏幕尺寸及以上应用该工具类:

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

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