排版
用于控制文本在元素内换行方式的工具。
¥Basic usage
¥Wrap
使用 text-wrap
将溢出文本换行到文本中逻辑点处的多行。
¥Use text-wrap
to wrap overflowing text onto multiple lines at logical points in the text.
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.
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.
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.
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>