内部分页

​基础用法

​设置 break-inside 行为

使用 break-inside-* 实用程序可控制元素中列或分页符的行为方式。例如，使用 break-inside-avoid-column 实用程序可避免元素中出现列分页符。

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

​有条件申请

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:break-inside-avoid-column 来仅 在 hover应用 break-inside-avoid-column.

<div class="hover:break-inside-avoid-column">
  <!-- ... -->
</div>

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:break-inside-avoid-column 来应用 break-inside-avoid-column 程序，适用于中等屏幕尺寸及以上。

<div class="md:break-inside-avoid-column">
  <!-- ... -->
</div>

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.