1. 排版
  2. 文本换行

Quick reference

属性
text-wraptext-wrap: wrap;
text-nowraptext-wrap: nowrap;
text-balancetext-wrap: balance;
text-prettytext-wrap: pretty;

基本用法

¥Basic usage

换行

¥Wrap

使用 text-wrap 将溢出文本换行到文本中逻辑点处的多行。

¥Use text-wrap to wrap overflowing text onto multiple lines at logical points in the text.

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.

<article class="text-wrap ...">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

无换行

¥No Wrap

使用 text-nowrap 防止文本换行,必要时允许文本溢出。

¥Use text-nowrap to prevent text from wrapping, allowing it to overflow if necessary.

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.

<article class="text-nowrap ...">
  <h3>Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

平衡

¥Balance

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

¥Use text-balance to distribute the text evenly across each line.

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.

<article>
  <h3 class="text-balance ...">Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

出于性能原因,浏览器将文本平衡限制为约 6 行或更少的块,使其最适合标题。

¥For performance reasons browsers limit text balancing to blocks that are ~6 lines or less, making it best suited for headings.

美化

¥Pretty

使用 text-pretty 可以防止文本块末尾出现孤立词(单独一行上的单个单词)。

¥Use text-pretty to prevent orphans (a single word on its own line) at the end of a text block.

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.

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

有条件地应用

悬停、聚焦和其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用hover:text-balance 仅在 hover 时应用 text-balance 工具。

<h1 class="text-wrap hover:text-balance">
  <!-- ... -->
</h1>

有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。

断点和媒体查询

你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:text-balance 仅在中等屏幕尺寸及以上时应用 text-balance 工具。

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

要了解更多信息,请查看有关 响应式设计暗黑模式、以及 其他媒体查询修饰符 的文档。