Tailwind CSS - 断字

Tailwind CSS **断字** 包含预定义的类，用于管理单词和长 URL 如何在网页上的文本元素中换行和显示。

Tailwind CSS 断字类

以下是 Tailwind CSS 断字类列表，以及用于控制单词换行方式以及如何处理文本中长单词和 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:** 此类用于保持字符序列的顺序，而不会导致它们断开。

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 断字类** 的示例，这些示例展示了如何控制单词换行行为以及如何在文本元素中处理长单词和 URL。

管理文本流

此示例显示了 Tailwind CSS 的 **break-normal** 类，它允许文本在其容器内正常换行。它确保文本在空格或允许的点处断开，保持自然的流动，而不会强制断开长单词。

示例

Open Compiler

 
<!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 不会溢出其指定空间。

示例

Open Compiler

<!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 断字类如何使用 **break-all** 类来允许文本在其容器内的任何字符点处断开。

示例

Open Compiler

<!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** 类，它确保长单词或文本序列保持 unbroken 并显示为其容器内的一个连续单元。

示例

Open Compiler

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

打印页面