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>

打印页面