text-wrap
快速参考
| 类别 | 样式 |
|---|---|
| text-wrap | text-wrap: wrap; |
| text-nowrap | text-wrap: nowrap; |
| text-balance | text-wrap: balance; |
| text-pretty | text-wrap: pretty; |
示例
允许文本换行
使用 text-wrap 工具可以在文本的逻辑断点处将溢出的文本换行到多行：
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>
防止文本换行
使用 text-nowrap 工具可以防止文本换行，必要时允许其溢出：
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>
平衡文本换行
使用 text-balance 工具可以将文本均匀分布在每一行中：
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 行或更少的块中，因此它最适合标题。
优化文本换行
使用 text-pretty 工具可以防止文本块末尾出现孤行（单独一行的单词）：
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-pretty">Beloved Manhattan soup stand closes</h3>
<p>New Yorkers are facing the winter chill...</p>
</article>
响应式设计
在 text-wrap 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：
<h1 class="text-pretty md:text-balance ...">
</h1>
在 变体文档 中了解更多关于使用变体的信息。