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 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 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.