Examples

Allowing text to wrap

Use thetext-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 thetext-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 thetext-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 thetext-pretty utility to prevent 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>

Responsive design

Prefix atext-wrap utility with a breakpoint variant likemd: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in thevariants documentation.