Tailwind CSS - 断开后

Tailwind CSS - 分隔符后（Break After）

Tailwind 的 break-after-* 工具类控制在元素之后，分页符、分栏符或区域分隔符应如何表现。它们主要和最常见的用例是微调打印文档的布局，但也可用于网页上的多列布局。

理解打印上下文

这些工具类中的大多数是为分页媒体（如 PDF 或物理打印输出）设计的。它们最好与 Tailwind 的 print: 变体一起使用，该变体仅在页面打印时应用样式。

Break After 类

Class	CSS 属性	主要用例（打印）
`break-after-auto`	`break-after: auto;`	默认行为；浏览器决定。
`break-after-avoid`	`break-after: avoid;`	避免在元素之后出现分隔符（分栏或分页）。
`break-after-all`	`break-after: all;`	强制在元素之后出现分隔符。对于页面，这类似于 `break-after-page`。
`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 工具类与 print: 变体结合使用，以创建干净、结构良好的可打印报告。每个主要部分在打印输出中都将从新页面开始，但在屏幕上，它将显示为单个连续文档。

示例：打印优化布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Printable Report with Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-gray-100 print:bg-white">

  <div class="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-lg print:shadow-none">
    <div class="flex justify-between items-center mb-8">
      <h1 class="text-3xl font-bold">Quarterly Business Report</h1>
      <button class="bg-blue-600 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 print:hidden" onclick="window.print()">
        Print Report
      </button>
    </div>

    <!-- Section 1: Always starts on the first page. -->
    <section class="mb-8 print:break-after-page">
      <h2 class="text-2xl font-semibold border-b pb-2 mb-4">Executive Summary</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada.</p>
    </section>

    <!-- Section 2: Will be forced onto a new page when printing. -->
    <section class="mb-8 print:break-after-page">
      <h2 class="text-2xl font-semibold border-b pb-2 mb-4">Financial Performance</h2>
      <p>Praesent quis congue massa. Proin sed eleifend magna. Curabitur ut commodo elit, et accumsan lorem.</p>
    </section>

    <!-- Section 3: This heading will try to stay with the paragraph below it. -->
    <section>
      <h2 class="text-2xl font-semibold border-b pb-2 mb-4 print:break-after-avoid">Market Analysis</h2>
      <p>Nunc eu est et massa semper accumsan. Sed ac sem eu dolor commodo tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </section>
  </div>

</body>
</html>

与多列布局一起使用

break-after-column 类在多列容器（使用 columns-* 工具类创建）中很有用，用于强制内容进入下一列。

示例：强制分栏

<div class="columns-2 gap-8">
  <p>This is the first column. It contains some text that will flow naturally.</p>
  <p class="break-after-column">This paragraph will have a column break forced after it.</p>
  <p>This text is guaranteed to start in the second column.</p>
  <p>More text to fill up the space.</p>
</div>

关键要点

优先考虑打印：这些工具类的主要用途是分页媒体。
使用 print: 变体：为避免影响屏幕布局，请始终使用 print: 前缀应用分隔符工具类（例如，print:break-after-page）。
列控制：break-after-column 是您在屏幕多列布局中将使用的主要工具类。