Tailwind CSS - 断开前

Tailwind CSS 现代指南：分栏符和分页符

本教程解释了如何使用 Tailwind 的 break-before 工具类控制元素之前的分栏符和分页符。这些对于格式化多列布局和确保整洁的打印友好页面至关重要。

理解 Break Before

break-before CSS 属性控制在给定元素之前是否应该发生分隔符（例如，开始一个新列或一个新的打印页面）。它最常用于两种场景：多列布局和打印样式表。

Break Before 工具类

Tailwind 提供了用于精细控制分隔符的工具类。最常见的是用于列控制，其他可用于页面/打印控制。

Class	CSS 属性	主要用例
`break-before-auto`	`break-before: auto;`	默认。浏览器决定在哪里分隔。
`break-before-avoid`	`break-before: avoid;`	避免在元素之前出现分隔符。
`break-before-all`	`break-before: all;`	强制在元素之前出现分隔符（适用于页面和列）。
`break-before-column`	`break-before: column;`	强制分隔，开始一个新列。最常见的用法。
`break-before-page`	`break-before: page;`	强制在元素之前出现分页符（用于打印）。
`break-before-avoid-page`	`break-before: avoid-page;`	避免在元素之前出现分页符（用于打印）。

实际应用示例：多列布局

break-before 在网页上最常见的用途是组织多列容器中的内容。在此示例中，我们有一个三列布局。我们在第三个 h3 标题上使用 break-before-column 来强制它及其后的内容进入下一个可用列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Column Break Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8 bg-gray-50">
    <h1 class="text-3xl font-bold mb-6">Company Quarterly Report</h1>

    <!-- The `columns-3` class creates the multi-column container -->
    <div class="columns-1 md:columns-2 lg:columns-3 gap-8 text-slate-600">
        <h2 class="font-semibold text-lg text-slate-800">Q1: Strong Start</h2>
        <p class="mb-4">The first quarter saw record engagement and sales, exceeding all projections. Key initiatives in marketing paid off handsomely.</p>

        <h2 class="font-semibold text-lg text-slate-800">Q2: Market Expansion</h2>
        <p class="mb-4">We successfully launched in three new territories. The operational challenges were significant but ultimately overcome by our dedicated team.</p>

        <!-- This heading will be pushed to the top of the next column -->
        <h2 class="break-before-column font-semibold text-lg text-slate-800">Q3: Product Innovation</h2>
        <p class="mb-4">The release of our new flagship product, 'Project Phoenix', was the highlight of the third quarter. Initial customer feedback is overwhelmingly positive.</p>

        <h2 class="font-semibold text-lg text-slate-800">Q4: Future Outlook</h2>
        <p class="mb-4">As we look to the next year, our focus will be on consolidating our new market positions and iterating on our product line based on user data.</p>

        <!-- This item is too short to need a break -->
        <h2 class="font-semibold text-lg text-slate-800">Acknowledgements</h2>
        <p>A special thanks to all departments for their hard work.</p>
    </div>
</body>
</html>

在打印样式中的应用

对于旨在打印的网页，您可以使用 break-before-page 来确保新部分（如章节或主要报告部分）始终在新纸张上开始。您可以使用 Tailwind 的 print: 变体仅在页面打印时应用这些样式。

仅限打印的分隔符示例

最佳实践和注意事项

谨慎使用：强制分隔有时会造成不必要的空白或在列底部出现孤行文本。仅在语义上必要时使用，例如新的章节或主要部分标题。
响应式分栏：将列类与响应式前缀（例如 md:columns-2、lg:columns-3）结合使用，以创建适应屏幕尺寸的布局，在移动设备上折叠成单列。
浏览器兼容性：多列布局属性在现代浏览器中得到了很好的支持，但始终建议在目标设备上测试您的布局。