排版
用于控制文本在元素内换行方式的工具。
¥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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:text-balance
to only apply the text-balance
utility on hover.
<h1 class="text-wrap hover:text-balance">
<!-- ... -->
</h1>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:text-balance
to apply the text-balance
utility at only medium screen sizes and above.
<h1 class="text-wrap md:text-balance">
<!-- ... -->
</h1>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.