Tailwind CSS - Break Before 类

Tailwind CSS break-before 是一个实用类，用于控制在元素前强制分列或分页。

Tailwind CSS Break Before 类

Tailwind CSS Break Before 类列表，提供有效的元素对齐方式。

Tailwind CSS Break Before 类的功能

• break-before-auto: 此类替换了 CSS break-before: auto; 属性。它具有自动确定分页符的默认行为。
• break-before-avoid:此类取代了 CSS break-before: avoid; 属性，该属性主要用于避免在元素前分页。
• break-before-all: 它取代了 CSSbreak-before: all; 属性，确保在所有元素前应用分页符。
• break-before-avoid-page: 它取代了 CSSbreak-before: avoid-page; 属性，确保避免在元素前分页。
• break-before-page: 它取代了 CSSbreak-before: page; 属性，确保在元素前应用分页符。
• break-before-left: 它取代了 CSSbreak-before: left; 属性在元素之前应用 break，确保它从左侧开始。
• break-before-right: 它取代了 CSS 的 break-before: right; 属性，该属性在元素之前应用 break，确保它从右侧开始。
• break-before-column: 它取代了 CSS 的 break-before: column; 属性，确保在元素之前应用列 break。

Tailwind CSS Break Before 示例

以下示例将说明 Tailwind CSS break before 类。

示例 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>