1. 布局
  2. break-after

布局

break-after

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

样式
break-after-auto
break-after: auto;
break-after-avoid
break-after: avoid;
break-after-all
break-after: all;
break-after-avoid-page
break-after: avoid-page;
break-after-page
break-after: page;
break-after-left
break-after: left;
break-after-right
break-after: right;
break-after-column
break-after: column;

示例

基本示例

使用类似 break-after-columnbreak-after-page 这样的实用工具来控制列或分页符在元素后的行为方式

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

响应式设计

前缀a break-after 实用工具 带有像 md: 这样的断点变体,仅在中等 屏幕尺寸及以上尺寸应用该实用工具

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

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策