1. 字体排印
  2. 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>

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策