Utilities for controlling how text wraps within an element.
Use text-wrap
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>
Use text-nowrap
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>
Use text-balance
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>
For performance reasons browsers limit text balancing to blocks that are ~6 lines or less, making it best suited for headings.
Use text-pretty
to prevent orphans (a single word on its own line) at the end of a text block.
<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.