文本排版
text-wrap
用于控制元素内文本如何换行的工具类。
| 类 | 样式 |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
示例
允许文本换行
使用 text-wrap 工具类在文本中的逻辑位置将溢出的文本换行到多行
深受喜爱的曼哈顿汤摊关闭
纽约人今年正面临着寒冬，但他们感受到的温暖却少了，因为该市最受尊敬的汤摊在发生了一系列让社区感到困惑的事件后意外关门。
<article class="text-wrap"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>阻止文本换行
使用 text-nowrap 工具类阻止文本换行，允许文本在必要时溢出
深受喜爱的曼哈顿汤摊关闭
纽约人今年正面临着寒冬，但他们感受到的温暖却少了，因为该市最受尊敬的汤摊在发生了一系列让社区感到困惑的事件后意外关门。
<article class="text-nowrap"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>均衡文本换行
使用 text-balance 工具类将文本均匀分布在每一行
深受喜爱的曼哈顿汤摊关闭
纽约人今年正面临着寒冬，但他们感受到的温暖却少了，因为该市最受尊敬的汤摊在发生了一系列让社区感到困惑的事件后意外关门。
<article> <h3 class="text-balance">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>出于性能原因，浏览器会将文本均衡限制为大约 6 行或更少的块，使其最适合标题。
美观的文本换行
使用 text-pretty 工具类防止文本块末尾出现孤立词（单独一行的单个词）
深受喜爱的曼哈顿汤摊关闭
纽约人今年正面临着寒冬，但他们感受到的温暖却少了，因为该市最受尊敬的汤摊在发生了一系列让社区感到困惑的事件后意外关门。
<article> <h3 class="text-pretty">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>响应式设计
前缀a text-wrap 工具类 使用诸如 md: 之类的断点变体，仅在中等 屏幕尺寸及以上应用该工具类
<h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>在变体文档中了解有关使用变体的更多信息。
