1. Typography
  2. text-wrap

Typography

text-wrap

用于控制元素中文本如何换行的工具功能.

ClassStyles
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.

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

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

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

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

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