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:** 此類用於保持字元序列的順序，而不會導致它們斷開。

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 斷字類如何使用 **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** 類，它確保長單詞或文字序列保持 unbroken 並顯示為其容器內的一個連續單元。

示例

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

列印頁面