SyntaxShelf

Pretty text

2 snippets in HTML & CSS

HCHTML & CSS

Text Wrap Balance & Pretty

HC · Typography
Syntax
text-wrap: balance | pretty | stable;
Example
h1, h2, h3 {
  text-wrap: balance;
}

.article-body {
  text-wrap: pretty;
}

Note text-wrap: balance distributes text evenly across lines, preventing headings with one orphaned word on the last line. text-wrap: pretty focuses on avoiding orphans in body text. balance has a limit of a few lines for performance reasons.

Modern Text Wrapping

HC · Modern CSS
Syntax
text-wrap: wrap | nowrap | balance | pretty | stable;
Example
h1, h2, h3, h4 {
  text-wrap: balance;
}

article p {
  text-wrap: pretty;
}

.editable-field {
  text-wrap: stable;
}

Note balance evenly distributes text across lines (best for headings). pretty avoids orphaned words on the last line (best for paragraphs). stable prevents text from reflowing while the user is editing. These require no JavaScript and are progressive enhancements.

Frequently asked questions

How does HTML & CSS handle pretty text?
HTML & CSS covers this with 2 copy-ready snippets on this page. The "Text Wrap Balance & Pretty" snippet in HTML & CSS uses `text-wrap: balance | pretty | stable;`.
Which code does the HTML & CSS example use?
The "Text Wrap Balance & Pretty" snippet uses `text-wrap: balance | pretty | stable;`, from the Typography section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "pretty text"?
Besides "Text Wrap Balance & Pretty", this page also shows "Modern Text Wrapping".
Is there anything to watch out for?
Yes. For "Text Wrap Balance & Pretty": text-wrap: balance distributes text evenly across lines, preventing headings with one orphaned word on the last line. text-wrap: pretty focuses on avoiding orphans in body text. balance has a limit of a few lines for performance reasons.

Browse all tasks by intent