Tailwind CSS - 分栏后断行

上一页
下一页

Tailwind CSS 的 **break-after** 是一个实用程序类，用于控制强制在元素之后进行列中断或分页中断。

Tailwind CSS 分栏后断行类

以下是 **Tailwind CSS 分栏后断行** 类列表，它提供了一种有效的元素对齐方式。

类 CSS 属性
break-after-auto break-after: auto;
break-after-avoid break-after: avoid;
break-after-all break-after: all;
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;

Tailwind CSS 分栏后断行类的功能

  • **break-after-auto:** 此类替换 CSS **break-after: auto;** 属性。它具有默认行为，将自动确定断行。
  • **break-after-avoid:** 此类替换 CSS **break-after: avoid;** 属性，主要用于避免在元素之后断行。
  • **break-after-all:** 它替换 CSS **break-after: all;** 属性，并确保在所有元素之后应用断行。
  • **break-after-avoid-page:** 它替换 CSS **break-after: avoid-page;** 属性，确保避免在元素之后分页。
  • **break-after-page:** 它替换 CSS **break-after: page;** 属性，确保在元素之后应用分页。
  • **break-after-left:** 它替换 CSS **break-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>
打印页面
上一页
下一页
广告