Typography
Utilities for controlling how text wraps within an element.
| Class | Styles |
|---|---|
text-wrap | text-wrap: wrap; |
text-nowrap | text-wrap: nowrap; |
text-balance | text-wrap: balance; |
text-pretty | text-wrap: pretty; |
Use the text-wrap utility to wrap overflowing text onto multiple lines at logical points in the text:
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>Use the text-nowrap utility to prevent text from wrapping, allowing it to overflow if necessary:
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>Use the text-balance utility to distribute the text evenly across each line:
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.
Use the text-pretty utility to optimimise for wrapping prettiness rather than browser speed. Behaviour varies by browser but often involves more complicated text wrapping approaches such as preventing orphans (a single word on its own line) at the end of a text block:
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-pretty">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>Browsers vary in their interpretation of prettiness but may include advanced typographic concepts such as:
reducing the variation in length between lines; avoiding typographic rivers; prioritizing different classes of soft wrap opportunities, hyphenation opportunities, or justification opportunities; avoiding hyphenation on too many consecutive lines - CSS Text Level 4 specification
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.