Text Wrap 文本换行
控制元素内文本换行的实用工具。
| Class | Properties |
|---|
基本用法
Wrap 包装
使用 text-wrap 将溢出的文本包装到文本的逻辑点上多行显示。
Beloved Manhattan soup stand closes
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article class="text-wrap ...">
<h3>Beloved Manhattan soup stand closes</h3>
<p>New Yorkers are facing the winter chill...</p>
</article>No Wrap 不换行
使用 text-nowrap 来防止文本换行，允许其必要时溢出。
Beloved Manhattan soup stand closes
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article class="text-nowrap ...">
<h3>Beloved Manhattan soup stand closes</h3>
<p>New Yorkers are facing the winter chill...</p>
</article>Balance 平衡
使用 text-balance 来使文本在每一行上均匀分布。
Beloved Manhattan soup stand closes
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article>
<h3 class="text-balance ...">Beloved Manhattan soup stand closes</h3>
<p>New Yorkers are facing the winter chill...</p>
</article>出于性能原因，浏览器将文本平衡限制在大约 6 行或更少的块中，因此最适合用于标题。
Pretty 漂亮
使用 text-pretty 来防止在文本块末尾出现孤立的单词（单独一行的单词）。
Beloved Manhattan soup stand closes
New Yorkers are facing the winter chill with less warmth this year as the city's most revered soup stand unexpectedly shutters, following a series of events that have left the community puzzled.
<article class="text-pretty ...">
<h3>Beloved Manhattan soup stand closes</h3>
<p>New Yorkers are facing the winter chill...</p>
</article>有条件地应用
悬停、焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:text-balance 只在悬停时应用 text-balance 实用程序。
<p class="text-wrap hover:text-balance">
<!-- ... -->
</p>有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:text-balance 仅在中等屏幕尺寸及以上应用 text-balance 实用程序。
<p class="text-wrap md:text-balance">
<!-- ... -->
</p>