text-wrap

用于控制元素内文本如何换行的工具类。

快速参考

类	属性
text-wrap	text-wrap: wrap;
text-nowrap	text-wrap: nowrap;
text-balance	text-wrap: balance;
text-pretty	text-wrap: pretty;

示例

允许文本换行

使用 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.

<!-- [!code classes: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 工具类阻止文本换行，必要时允许溢出：

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.

<!-- [!code classes: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 工具类将文本均匀分布到每一行：

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.

<!-- [!code classes: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 工具类优先获得更好的文本换行和布局，代价是速度。各浏览器行为不同，但通常会采用避免孤行（文本块末尾单独成行的一个单词）等方法：

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.

<!-- [!code classes:text-pretty] -->
<article>
  <h3 class="text-pretty">Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

响应式设计

使用 md: 等断点变体作为 text-wrap 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

<h1 class="text-pretty md:text-balance ...">
 <!-- ... -->
</h1>

更多关于变体的用法，请参阅变体文档。