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;** 属性，确保在元素之前应用列断行。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 断行符之前示例

以下示例将说明 Tailwind CSS 的 **断行符之前** 类。

示例 1

以下示例演示了 **break-before-auto、break-before-avoid、break-before-all、** break-before-avoid-page 类的用法。

Open Compiler

<!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 类的用法。**

Open Compiler

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

打印页面