CSS Text Wrap
The text-wrap property controls how text inside an element wraps. It introduces values like balance and pretty to solve common typographic issues on the web, such as uneven headlines or orphans in paragraphs.
1. Values
wrap (Default)
Text wraps at the most appropriate point to minimize overflow. This is standard browser behavior.
nowrap
Text does not wrap. It continues on the same line until a <br> tag is encountered.
balance
The browser attempts to balance the number of characters on each line. This is designed for headlines and short blocks of text.
h1 {
text-wrap: balance;
}Before:
The Quick Brown Fox Jumps Over The Lazy Dog
After (Balanced):
The Quick Brown Fox Jumps Over The Lazy Dog
- Performance: Balancing text is computationally expensive. Browsers limit this to blocks with a small number of lines (usually 4-6). Do not use this on long paragraphs.
pretty
The browser uses a slower algorithm to layout text for better typographic results. It is designed for body text. Its primary goal is to prevent orphans (a single word on the last line of a paragraph).
p {
text-wrap: pretty;
}- Performance: Slower than
wrapbut faster thanbalance. It's suitable for longer blocks of text.
2. Browser Support
balance: Supported in Chrome, Edge, Safari, and Firefox.pretty: Supported in Chrome and Edge (v117+).
3. Use Cases
- Headings: Use
text-wrap: balanceto make titles look symmetrical and professional. - Articles: Use
text-wrap: prettyon paragraphs to avoid awkward single words at the end of blocks.