Tailwind CSS - 文字換行

Tailwind CSS **文字換行** 是一個預定義類集合，用於控制其容器內文字的換行方式，提供正常換行、單詞換行或完全禁止換行的選項。

Tailwind CSS 文字換行類

以下是 Tailwind CSS 文字換行類及其管理文字在其容器內換行方式的屬性列表。

類名	CSS 屬性
text-wrap	text-wrap: wrap;
text-nowrap	text-wrap: nowrap;
text-balance	text-wrap: balance;
text-pretty	text-wrap: pretty;

Tailwind CSS 文字換行類的功能

**text-wrap:** 此類允許文字在其容器內換行。
**text-nowrap:** 此類阻止文字換行，使其保持在單行上而不中斷。
**text-balance:** 此類均勻地平衡各行文字，最佳化換行符以獲得更一致的行長。
**text-pretty:** 此類防止孤行，確保單個單詞不會單獨出現在文字塊的最後一行。

Tailwind CSS 文字換行類示例

以下是 Tailwind CSS 文字換行類的示例，展示了文字在其容器內的換行行為。

將溢位的文字換行到多行

此示例展示了 **text-wrap** 類如何允許文字在其容器內換行，確保其在指定寬度內自然流暢地顯示，而不會溢位。

示例

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
     <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Wrap
    </h1>  
     <p class="underline font-bold"> 
        Applying Text Wrap
    </p>

    <div class="w-64 bg-gray-200 p-4">
        <p class="text-wrap text-lg">
            Tutorialspoint covers a wide array of programming
            languages, Frameworks, and tools. Whether you're 
            interested in Java, Python, C++, JavaScript, or 
            any other language, you'll find comprehensive 
            tutorials with examples and explanations.
        </p>
    </div>
</body>

</html>

防止文字換行

此示例展示了 **no-wrap** 類如何防止文字在其容器內換行，如果文字超過指定寬度，則會導致溢位。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Wrap
    </h1>  
    <p class="underline font-bold"> 
        Applying Text NoWrap
    </p>
    
    <div class="w-64 bg-gray-200 p-4">
        <p class="text-nowrap text-lg">
            This text will not wrap and will overflow 
            if it exceeds the width of its container.
        </p>
    </div>
</body>

</html>

均勻分佈各行文字

此示例展示瞭如何在 Tailwind CSS 中使用 **text-balance** 類來均勻地將單詞分佈到每一行文字中，從而建立視覺上平衡的文字塊。

示例

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Wrap
    </h1>  
    <p class="underline font-bold"> 
        Applying Text Balance 
    </p>
    <div class="w-64 bg-gray-200 p-4">
        <p class="text-balance text-lg">
            This text is balanced to have a more even 
            distribution of words across each line.
        </p>
    </div>
</body>

</html>

使用 Text Pretty 類防止孤行

此示例展示了 Tailwind CSS 如何使用 **text-pretty** 類來避免孤行（即單獨出現在文字塊最後一行上的單個單詞），方法是調整換行符以確保沒有單個單詞單獨出現在段落的最後一行。

示例

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Text Wrap
    </h1>  
    <p class="underline font-bold"> 
        Applying Text Pretty
    </p>
 
    <div class="w-64 bg-gray-200 p-4">
        <p class="text-pretty text-lg">
            This text prevents orphans at the end of 
            paragraphs, ensuring no single word is 
            left on its own line.
        </p>
    </div>
</body>

</html>

列印頁面