Tailwind CSS - 分頁符中斷

Tailwind CSS 的 **break-inside** 是一個實用程式類，它提供了一種方法來控制列或頁面如何在元素內中斷。

Tailwind CSS 分頁符中斷類

以下是 **Tailwind CSS 分頁符中斷** 類的列表，它有助於有效地對齊元素內的內容。

類名	CSS 屬性
break-inside-auto	break-inside: auto;
break-inside-avoid	break-inside: avoid;
break-inside-avoid-page	break-inside: avoid-page;
break-inside-avoid-column	break-inside: avoid-column;

Tailwind CSS 分頁符中斷類的功能

**break-inside-auto:** 此類替換 CSS **break-inside: auto;** 屬性。它具有預設行為，它將自動確定元素內的中斷。
**break-inside-avoid:** 此類替換 CSS **break-inside: avoid;** 屬性，該屬性主要關注避免元素內的中斷。
**break-inside-avoid-page:** 此類替換 CSS **break-inside: avoid-page;** 屬性，該屬性確保避免元素內的頁面中斷。
**break-inside-avoid-column:** 此類替換 CSS **break-inside: avoid-column;** 屬性，該屬性確保在元素內應用列中斷。

Tailwind CSS 分頁符中斷示例

以下示例將說明 Tailwind CSS **break-inside** 類實用程式。

示例 1

以下示例演示了 **break-inside-auto & break-inside-avoid** 類的用法。

<!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 Inside
    </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>

    <!-- Container with break-inside-auto -->
    <div class="p-4 mb-4
              bg-gray-100">
        <h2 class="text-lg 
                font-semibold">
            Break Inside Auto
        </h2>
        <div class="break-inside-auto">
            <p>
                This container uses the `break-inside-auto` class.
                The browser will automatically determine where 
                breaks should occur inside this container.
            </p>
        </div>
    </div>

    <!-- Container with break-inside-avoid -->
    <div class="p-4 mb-4
              bg-gray-200">
        <h2 class="text-lg 
                font-semibold">
            Break Inside Avoid
        </h2>
        <div class="break-inside-avoid">
            <p>
                This container uses the `break-inside-avoid` class.
                Breaks inside this container will be avoided, keeping
                the content together.
            </p>
        </div>
    </div>
</body>
</html>

示例 2

以下示例演示了 **break-inside-avoid-page & break-inside-avoid-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 Inside
  </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>

  <!-- Container with break-inside-avoid-page -->
  <div class="p-4 mb-4
              bg-gray-300">
      <h2 class="text-lg 
                  font-semibold">
          Break Inside Avoid Page
      </h2>
      <div class="break-inside-avoid-page">
          <p>
              This container uses the `break-inside-avoid-page` class.
              Page breaks inside this container will be avoided.
          </p>
      </div>
  </div>

  <!-- Container with break-inside-avoid-column -->
  <div class="p-4 mb-4
              bg-gray-400">
      <h2 class="text-lg 
                  font-semibold">
          Break Inside Avoid Column
      </h2>
      <div class="columns-2">
          <!-- Column 1 -->
          <div>
              <!-- A list of items that should not break inside the column -->
              <ul class="break-inside-avoid-column">
                  <li>Item 1</li>
                  <li>Item 2</li>
                  <li>Item 3</li>
                  <li>Item 4</li>
                  <li>Item 5</li>
              </ul>
          </div>
          <!-- Column 2 -->
          <div>
              <!-- Some other content -->
              <p>Simply Easy Learning</p>
          </div>
      </div>
      <script>
          function printPage() {
              window.print();
          }
      </script>
</body>

</html>

列印頁面