Tailwind CSS - Break After

Tailwind CSS break-after 是一个实用类，它提供控件以在元素后强制进行分列或分页。

Tailwind CSS Break After 类

Tailwind CSS Break-After 类列表，提供有效的元素对齐方式。

Tailwind CSS Break After 类的功能

• break-after-auto: 此类替换了 CSS break-after: auto; 属性。它具有自动确定分页符的默认行为。
• break-after-avoid:此类取代了 CSS break-after: avoid; 属性，该属性主要用于避免在元素后分页。
• break-after-all: 它取代了 CSSbreak-after: all; 属性，并确保在所有元素后应用分页符。
• break-after-avoid-page: 它取代了 CSSbreak-after: avoid-page; 属性，以确保避免在元素后分页。
• break-after-page: 它取代了 CSSbreak-after: page; 属性，以确保在元素后应用分页符。
• break-after-left: 它取代了 CSSbreak-after: left; 属性，该属性在元素后应用分页符元素，确保它从左侧开始。
• break-after-right: 它取代了 CSS 中的 break-after: right; 属性，该属性在元素后应用中断，确保它从右侧开始。
• break-after-column: 它取代了 CSS 中的 break-after: column; 属性，确保在元素后应用列中断。

Tailwind CSS 后中断示例

以下示例将说明 Tailwind CSS 中的 break-after 类。

示例 1

以下示例演示了 break-after-auto、break-after-avoid、break-after-all 和 break-after-avoid-page 类的用法。

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <p class="text-3xl">
        Tailwind CSS Break After
    </p>
    <p>
        Click on below button to see the effect when you
        print the page.
    </p>
    <button class="bg-blue-500 
                   hover:bg-blue-700 
                   text-white 
                   font-bold 
                   py-1 px-3 
                   my-2 rounded" 
                   onclick="printPage()">
        Print Page
    </button>
    <!-- Section with break-after-auto -->
    <div class="p-4 mb-4 
                bg-gray-100">
        <h2 class="text-lg 
                   font-semibold">
            Section 1: Break After Auto
        </h2>
        <p class="break-after-auto">
            This section uses the `break-after-auto` class. 
            The browser will automatically determine whether 
            a page break should occur after this element.
        </p>
    </div>

    <!-- Section with break-after-avoid -->
    <div class="p-4 mb-4
                bg-gray-200">
        <h2 class="text-lg 
                   font-semibold">
            Section 2: Break After Avoid
        </h2>
        <p class="break-after-avoid">
            This section uses the `break-after-avoid` class.
            A page break will be avoided after this element 
            if possible.
        </p>
    </div>

    <!-- Section with break-after-all -->
    <div class="p-4 mb-4
                bg-gray-300">
        <h2 class="text-lg 
                   font-semibold">
            Section 3: Break After All
        </h2>
        <p class="break-after-all">
            This section uses the `break-after-all` class. A page break
            will always occur after this element.
        </p>
    </div>

    <!-- Section with break-after-avoid-page -->
    <div class="p-4 bg-gray-400 mb-4">
        <h2 class="text-lg font-semibold">
            Section 4: Break After Avoid Page
        </h2>
        <p class="break-after-avoid-page">
            This section uses the `break-after-avoid-page` class.
            A page break will be avoided after this element, 
            unless it is unavoidable to do so.
        </p>
    </div>
    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>

</html>

示例 2

以下示例演示了 break-after-page、break-after-left、break-after-right、break-after-column 类的用法。

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <p class="text-3xl">
        Tailwind CSS Break After
    </p>
    <p>Click on below button to see the effect when you
       print the page.
    </p>
    <button class="bg-blue-500 
                   hover:bg-blue-700 
                   text-white 
                   font-bold 
                   py-1 px-3 
                   my-2 rounded" 
                   onclick="printPage()">
        Print Page
    </button>
    
    <!-- Section with break-after-page -->
    <div class="p-4 mb-4
                bg-gray-100">
        <h2 class="text-lg 
                   font-semibold">
            Section 1: Break After Page
        </h2>
        <p class="break-after-page">
            This section uses the `break-after-page` class. 
            A page break will occur after this element.
        </p>
    </div>

    <!-- Section with break-after-left -->
    <div class="p-4 mb-4
                bg-gray-200">
        <h2 class="text-lg 
                   font-semibold">
            Section 2: Break After Left
        </h2>
        <p class="break-after-left">
            This section uses the `break-after-left` class.
            A break will occur after this element to ensure 
            the next content starts on the left page of a spread.
        </p>
    </div>

    <!-- Section with break-after-right -->
    <div class="p-4 mb-4
                bg-gray-300">
        <h2 class="text-lg 
                   font-semibold">
            Section 3: Break After Right
        </h2>
        <p class="break-after-right">
            This section uses the `break-after-right` class.
            A break will occur after this element to ensure
            the next content starts on the right page of a 
            spread.
        </p>
    </div>

    <!-- Section with break-after-column -->
    <div class="p-4 mb-4 
                bg-gray-400
                columns-2">
        <h2 class="text-lg 
                   font-semibold">
            Section 4: Break After Column
        </h2>
        <p class="break-after-column">
            This section uses the `break-after-column` class.
            A column break will occur after this element.
        </p>
        <p>
            This is the broken content that has been
            broken due to break-after-column class.
        </p>
    </div>
    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>

</html>