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:** 此类防止孤行，确保单个单词不会单独出现在文本块的最后一行。

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 文本换行类的示例，展示了文本在其容器内的换行行为。

将溢出的文本换行到多行

此示例展示了 **text-wrap** 类如何允许文本在其容器内换行，确保其在指定宽度内自然流畅地显示，而不会溢出。

示例

Open Compiler

 
<!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** 类如何防止文本在其容器内换行，如果文本超过指定宽度，则会导致溢出。

示例

Open Compiler

<!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** 类来均匀地将单词分布到每一行文本中，从而创建视觉上平衡的文本块。

示例

Open Compiler

 
<!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** 类来避免孤行（即单独出现在文本块最后一行上的单个单词），方法是调整换行符以确保没有单个单词单独出现在段落的最后一行。

示例

Open Compiler

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

打印页面