笙亿网络策划

Tailwind CSS 文本怎么换行包裹？

约 8 分钟读完 39 阅
文章导读
Previous Quiz Next Tailwind CSS Text Wrap 是一组预定义的 class，用于控制文本在其容器内的换行行为，提供正常换行、单词换行到下一行或完全防止换行的选项。
📋 目录
  1. Ⅰ Tailwind CSS Text Wrap Classes
  2. Ⅱ Tailwind CSS Text Wrap Classes 的功能
  3. Ⅲ Tailwind CSS Text Wrap Class 示例
  4. Ⅳ 将溢出文本换行到多行
  5. Ⅴ 防止文本换行
  6. Ⅵ 将文本均匀分布在每一行
  7. Ⅶ 使用 Text Pretty 类防止孤立词
A A

Tailwind CSS - 文本换行

Previous
Quiz
Next

Tailwind CSS Text Wrap 是一组预定义的 class，用于控制文本在其容器内的换行行为，提供正常换行、单词换行到下一行或完全防止换行的选项。

Tailwind CSS Text Wrap Classes

以下是 Tailwind CSS Text Wrap classes 的列表及其属性，用于管理文本在其容器内的换行方式。

Class CSS Properties
text-wrap text-wrap: wrap;
text-nowrap text-wrap: nowrap;
text-balance text-wrap: balance;
text-pretty text-wrap: pretty;

Tailwind CSS Text Wrap Classes 的功能

  • text-wrap: 该 class 允许文本在其容器内换行。
  • text-nowrap:该 class 防止文本换行，使其保持在单行上而不中断。
  • text-balance: 该 class 使文本在各行之间均匀平衡，优化换行以获得更一致的行长。
  • text-pretty:该 class 防止孤儿行，确保文本块的最后一行不会只有一个单独的单词。

Tailwind CSS Text Wrap Class 示例

以下是 Tailwind CSS Text Wrap classes 的示例，展示文本在其容器内的换行行为。

将溢出文本换行到多行

此示例展示 text-wrap class 如何允许文本在其容器内换行，确保其在指定宽度内自然流动而不溢出。

示例

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

防止文本换行

此示例展示 text-nowrap class 如何防止文本在其容器内换行，如果超过指定宽度则会导致溢出。

示例

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