Tailwind CSS - Word Break
Tailwind CSS Word Break 包含预定义类，用于管理网页上文本元素中单词和长 URL 的换行和显示方式。
Tailwind CSS Word Break 类
以下是 Tailwind CSS Word Break 类的列表，其中包含用于控制文本中单词换行以及处理长单词和 URL 的属性。
| 类 | CSS 属性 |
|---|---|
| break-normal | overflow-wrap: normal; word-break: normal; |
| break-words | overflow-wrap: break-word; |
| break-all | word-break: break-all; |
| break-keep | word-break: keep-all; |
Tailwind CSS 断字类的功能
- break-normal此类用于在特定点或空格处中断文本流。
- break-words此类用于确保长单词在超出容器宽度时被正确断行并换行到下一行。
- break-all此类用于使单词能够在容器宽度内的任意字符点处换行。
- break-keep此类用于保持字符序列的顺序而不导致它们断开。
Tailwind CSS 断字类示例
以下是 Tailwind CSS 断字类 的示例，展示了如何控制换行行为以及文本中长单词和 URL 的处理元素。
管理文本流
此示例展示了 Tailwind CSS 的 break-normal 类，该类允许文本在其容器内正常换行。它确保文本在空格或允许的点处换行，从而保持自然的文本流，而不会强制断开长单词。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Word Break
</h2>
<h3 class="underline font-bold mb-6">
Applying break-normal
</h3>
<div class="bg-gray-200 max-w-xs">
<p class="break-normal">
This is a normal text wrapping example
using Tailwind CSS. The text should wrap
normally within the container, breaking
at spaces or allowed points.
</p>
</div>
</body>
</html>
处理长单词
此示例展示了 Tailwind CSS 的 break-words 类，该类允许长单词在其容器内断开并换行。它确保长单词或 URL 不会超出其指定空间。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Word Break
</h2>
<h3 class="underline font-bold mb-6">
Applying break-words
</h3>
<div class="bg-gray-200 max-w-xs">
<p class="break-words">
Thisisaverylongwordthatshouldbebrokenintomultiplelines.
</p>
</div>
</body>
</html>
增强文本显示
此示例展示了 Tailwind CSS Word break 类如何使用 break-all 类使文本能够在其容器内的任意字符点处断行。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Word Break
</h2>
<h3 class="underline font-bold mb-6">
Applying break-all
</h3>
<div class="bg-gray-200 max-w-xs">
<p class="break-all">
Thisisaverylongwordthatshouldbebrokenatanycharacterpoint.
</p>
</div>
</body>
</html>
保留文本序列
此示例展示了 Tailwind CSS 的 break-keep 类，该类可确保长单词或文本序列保持完整，并在其容器内显示为一个连续的单元。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Word Break
</h2>
<h3 class="underline font-bold mb-6">
Applying break-keep
</h3>
<div class="bg-gray-200 max-w-xs">
<p class="break-keep">
Thisisaverylongwordthatshouldnotbebrokenintomultiplelines
and should remainas one continuous sequence.
</p>
</div>
</body>
</html>
