Tailwind CSS - Break Inside

Tailwind CSS break-inside 是一个实用类，它提供了一种在元素内如何分列或分页的方法。

Tailwind CSS Break Inside 类

以下是 Tailwind CSS Break-Inside 类的列表，这些类有助于有效地对齐元素内的内容。

Tailwind CSS Break Inside 类的功能

• 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>