text-wrap

示例

允许文本换行

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