Tailwind CSS - 断后
Tailwind CSS break-after 是一个实用类，用于控制在元素后强制产生列断开或页面断开。
Tailwind CSS 断后类
以下是 Tailwind CSS Break-After 类列表，这些类提供了有效控制元素对齐的方式。
| Class | CSS Properties |
|---|---|
| break-after-auto | break-after: auto; |
| break-after-avoid | break-after: avoid; |
| break-after-all | break-after: all; |
| break-after-avoid-page | break-after: avoid-page; |
| break-after-page | break-after: page; |
| break-after-left | break-after: left; |
| break-after-right | break-after: right; |
| break-after-column | break-after: column; |
Tailwind CSS 断后类的功能
- break-after-auto: 该类替换 CSS break-after: auto; 属性。它具有默认行为，会自动决定是否断开。
- break-after-avoid: 该类替换 CSS break-after: avoid; 属性，主要用于避免在元素后产生断开。
- break-after-all: 它替换 CSS break-after: all; 属性，确保在所有元素后应用断开。
- break-after-avoid-page: 它替换 CSS break-after: avoid-page; 属性，确保避免在元素后产生页面断开。
- break-after-page: 它替换 CSS break-after: page; 属性，确保在元素后应用页面断开。
- break-after-left: 它替换 CSS break-after: left; 属性，在元素后应用断开，确保从左侧开始。
- break-after-right: 它替换 CSS break-after: right; 属性，在元素后应用断开，确保从右侧开始。
- break-after-column: 它替换 CSS break-after: column;，确保在元素后应用列断开。
Tailwind CSS 断后示例
下面的示例将演示 Tailwind CSS break-after 类。
示例 1
以下示例演示了 break-after-auto、break-after-avoid、break-after-all、break-after-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 After
</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="