Tailwind CSS - Text Wrap
Tailwind CSS Text Wrap 是一组预定义类，用于控制文本在其容器内的换行方式，提供正常换行、将文字换行到下一行或完全阻止换行等选项。
Tailwind CSS Text Wrap 文本换行类
以下是 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>
