文本换行

文本换行

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

Class Styles

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>心爱的曼哈顿汤摊关闭</h3>
  <p>纽约人在这个冬天感到寒意更重...</p>
</article>

使用 text-nowrap 工具阻止文本换行，如果需要，可以允许其溢出：

心爱的曼哈顿汤摊关闭

纽约人在这个冬天感到寒意更重，因为这座城市最受尊敬的汤摊意外关闭，接连发生的事件让社区感到困惑。

<article class="text-nowrap">
  <h3>心爱的曼哈顿汤摊关闭</h3>
  <p>纽约人在这个冬天感到寒意更重...</p>
</article>

使用 text-balance 工具将文本均匀分布在每行上：

心爱的曼哈顿汤摊关闭

纽约人在这个冬天感到寒意更重，因为这座城市最受尊敬的汤摊意外关闭，接连发生的事件让社区感到困惑。

<article>
  <h3 class="text-balance">心爱的曼哈顿汤摊关闭</h3>
  <p>纽约人在这个冬天感到寒意更重...</p>
</article>

出于性能原因，浏览器将文本平衡限制在大约 6 行或更少的块上，最适合用于标题。

使用 text-pretty 工具防止孤立行（单词自己在一行）的出现：

心爱的曼哈顿汤摊关闭

纽约人在这个冬天感到寒意更重，因为这座城市最受尊敬的汤摊意外关闭，接连发生的事件让社区感到困惑。

<article>
  <h3 class="text-pretty">心爱的曼哈顿汤摊关闭</h3>
  <p>纽约人在这个冬天感到寒意更重...</p>
</article>

Prefix a text-wrap utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.