Tailwind CSS - 断开内部

Tailwind CSS: break-inside

break-inside 工具类用于控制内容在多列或多页元素内部的断裂方式。它们的主要用途是防止出现不协调的断裂，这种断裂会使内容难以阅读，尤其是在多列文本布局或打印网页时。

break-inside 工具类

这些工具类让您能够精确控制布局中的内容碎片化。

类名	CSS 属性	描述
break-inside-auto	break-inside: auto;	默认行为。浏览器将自动决定内容在哪里断裂。
break-inside-avoid	break-inside: avoid;	避免在元素内部发生列或分页断裂。
break-inside-avoid-page	break-inside: avoid-page;	专门避免在元素内部发生分页断裂（用于打印）。
break-inside-avoid-column	break-inside: avoid-column;	专门避免在元素内部发生列断裂。

实战示例：多列文章布局

设想一个在线杂志的布局。您希望文本在列之间流动，但又不希望图片标题或引用块被一分为二。这就是 break-inside-avoid-column 的理想应用场景。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Break Inside Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white p-8 font-serif text-slate-700">

  <h1 class="text-4xl font-bold text-slate-900 mb-4">The Art of Layout</h1>

  <!-- 在中等及以上屏幕上，显示为带有间距的两列布局 -->
  <div class="md:columns-2 md:gap-12">
    <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>

    <p class="mb-4">Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.</p>

    <!-- 这个 figure 块不会在列之间被分割 -->
    <figure class="mb-4 p-4 bg-slate-100 rounded-md **break-inside-avoid-column**">
      <blockquote class="border-l-4 border-slate-400 pl-4 italic">
        "The ability to prevent awkward breaks is crucial for readability. This blockquote will always stay together."
      </blockquote>
      <figcaption class="text-right text-sm mt-2 text-slate-500">— A Wise Designer</figcaption>
    </figure>

    <p class="mb-4">Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.</p>

    <p class="mb-4">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam.           </p>

  </div>
</body>
</html>

现代背景与最佳实践

• 主要用例： columns-* 和 break-inside-* 工具类最适用于长篇、文本密集型内容，例如文章、文档或报告。
• Flexbox/Grid 与 Columns 的对比： 对于大多数组件和页面布局，现代 CSS Flexbox (flex) 和 Grid (grid) 比多列布局模块更强大、更灵活。请根据其特定的文本流能力来使用 columns。
• 打印样式表： 在创建网页的打印友好版本时，break-inside-avoid-page 是非常有价值的。您可以使用它来确保重要的部分（例如图表及其标题）在打印时保持在同一页上。使用 print: 前缀：print:break-inside-avoid-page。