Lzh on GitHub

break-after

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

快速参考

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

示例

基本示例

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

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

响应式设计

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

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

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