字体排印
用于控制元素内文本换行的实用工具。
类名 | 样式 |
---|---|
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>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>
使用 text-nowrap
实用工具阻止文本换行,并在必要时允许其溢出
今年,纽约人面临寒冬时少了一份温暖,因为这座城市最受尊敬的汤摊意外关闭了,此前发生了一系列令社区感到困惑的事件。
<article class="text-nowrap"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>
使用 text-balance
实用工具在每行之间均匀分布文本
今年,纽约人面临寒冬时少了一份温暖,因为这座城市最受尊敬的汤摊意外关闭了,此前发生了一系列令社区感到困惑的事件。
<article> <h3 class="text-balance">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>
出于性能原因,浏览器将文本平衡限制为大约 6 行或更少的块,使其最适合用于标题。
使用 text-pretty
实用工具防止文本块末尾出现孤行(单行单词)
今年,纽约人面临寒冬时少了一份温暖,因为这座城市最受尊敬的汤摊意外关闭了,此前发生了一系列令社区感到困惑的事件。
<article> <h3 class="text-pretty">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>
前缀a text-wrap
实用工具 使用断点变体(如 md:
)仅在以下情况下应用该实用工具中等 屏幕尺寸及以上
<h1 class="text-pretty md:text-balance ..."> <!-- ... --></h1>
在变体文档中了解更多关于使用变体的信息。