text-wrap

Examples

Allowing text to wrap

Use the text-wrap utility 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>

Preventing text from wrapping

Use the text-nowrap utility 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>

Balanced text wrapping

Use the text-balance utility 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.

Pretty text wrapping

Use the text-pretty utility to prefer better text wrapping and layout at the expense of speed. Behavior varies across browsers but often involves approaches like preventing orphans (a single word on its own line) at the end of a text block:

<article>
  <h3 class="text-pretty">Beloved Manhattan soup stand closes</h3>
  <p>New Yorkers are facing the winter chill...</p>
</article>

Browsers vary in their interpretation of prettiness and may choose improvements like:

• Reducing the variation in length between lines
• Avoiding typographic rivers
• Avoiding hyphenation on too many consecutive lines
• Prioritizing different classes of soft wrap opportunities
• and more…

Responsive design

Prefix a text-wrap utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<h1 class="text-pretty md:text-balance ...">
  <!-- ... -->
</h1>

Learn more about using variants in the variants documentation.