text-wrap

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>

在变体文档中了解更多关于使用变体的信息。