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>
列印頁面
上一頁
下一頁
廣告