text-wrap

示例(Examples)

¥Examples

允许文本换行(Allowing text to wrap)

¥Allowing text to wrap

使用 text-wrap 工具将溢出文本换行到多行在文本中的逻辑点：

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

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

防止文本换行(Preventing text from wrapping)

¥Preventing text from wrapping

使用 text-nowrap 工具防止文本换行，必要时允许文本溢出：

¥Use the text-nowrap utility to prevent text from wrapping, allowing it to overflow if necessary:

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

平衡文本换行(Balanced text wrapping)

¥Balanced text wrapping

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

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

<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 wrapping)

¥Pretty text wrapping

使用 text-pretty 工具防止文本块末尾出现孤行（单个单词占一行）：

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

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

响应式设计(Responsive design)

¥Responsive design

在 text-wrap 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。