Tailwind CSS - 斷行符之前

Tailwind CSS 的 **break-before** 是一個實用程式類，它提供控制能力，可以在元素之前強制進行列中斷或頁面中斷。

Tailwind CSS 斷行符之前類

Tailwind CSS 斷行符之前 類列表提供了一種有效的元素對齊方式。

類	CSS 屬性
break-before-auto	break-before: auto;
break-before-avoid	break-before: avoid;
break-before-all	break-before: all;
break-before-avoid-page	break-before: avoid-page;
break-before-page	break-before: page;
break-before-left	break-before: left;
break-before-right	break-before: right;
break-before-column	break-before: column;

Tailwind CSS 斷行符之前類的功能

break-before-auto: 此類替換 CSS 的 **break-before: auto;** 屬性。它具有預設行為，即它將自動確定斷行。
break-before-avoid: 此類替換 CSS 的 **break-before: avoid;** 屬性，該屬性主要側重於避免在元素之前斷行。
break-before-all: 它替換 CSS 的 **break-before: all;** 屬性，確保在所有元素之前應用斷行。
break-before-avoid-page: 它替換 CSS 的 **break-before: avoid-page;** 屬性，確保避免在元素之前進行頁面斷行。
break-before-page: 它替換 CSS 的 **break-before: page;** 屬性，確保在元素之前應用頁面斷行。
break-before-left: 它替換 CSS 的 **break-before: left;** 屬性，該屬性在元素之前應用斷行，確保它將從左側開始。
break-before-right: 它替換 CSS 的 **break-before: right;** 屬性，該屬性在元素之前應用斷行，確保它將從右側開始。
break-before-column: 它替換 CSS 的 **break-before: column;** 屬性，確保在元素之前應用列斷行。

Tailwind CSS 斷行符之前示例

以下示例將說明 Tailwind CSS 的 **斷行符之前** 類。

示例 1

以下示例演示了 **break-before-auto、break-before-avoid、break-before-all、** break-before-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 Before
    </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-before-auto -->
  <div class="p-4 mb-4
              bg-gray-100">
    <h2 class="text-lg 
               font-semibold">
        Section 1: Break Before Auto
    </h2>
    <p class="break-before-auto">
      This section uses the `break-before-auto` class. The browser will
      automatically determine whether a page break should occur before
      this element.
    </p>
  </div>

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

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

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

示例 2

以下示例演示了 **break-before-page、break-before-left、break-before-right、break-before-column 類的用法。**

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

<body class="p-4">
    <p class="text-3xl">
        Tailwind CSS Break Before
    </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-before-page -->
  <div class="p-4 mb-4
              bg-gray-100">
    <h2 class="text-lg 
               font-semibold">
        Section 1: Break Before Page
    </h2>
    <p class="break-before-page">
      This section uses the `break-before-page` class. A page break will
      occur before this element.
    </p>
  </div>

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

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

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

列印頁面