Question

Utilities for controlling how text wraps within an element.

Quick reference

Class	Properties
text-wrap	text-wrap: wrap;
text-nowrap	text-wrap: nowrap;
text-balance	text-wrap: balance;
text-pretty	text-wrap: pretty;

Basic usage

Wrap

Use text-wrap to wrap overflowing text onto multiple lines at logical points in the text.

Beloved Manhattan soup stand closes

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

Use text-nowrap to prevent text from wrapping, allowing it to overflow if necessary.

Beloved Manhattan soup stand closes

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

Use text-balance to distribute the text evenly across each line.

Beloved Manhattan soup stand closes

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>

For performance reasons browsers limit text balancing to blocks that are ~6 lines or less, making it best suited for headings.

Pretty

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

Beloved Manhattan soup stand closes

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>

---

Applying conditionally

Hover, focus, and other states

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.

Breakpoints and media queries

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.