CSS Text & Fonts
Text Wrapping
Handle long words, truncation, balanced headings, and multi-line clamping without breaking layouts. The chapter covers long URLs, emergency breaks, language-aware hyphenation, balanced headings, ellipsis, and responsible multi-line clamping.
Text overflow is a content problem expressed through layout. CSS can wrap, hyphenate, clip, or truncate the text, but each choice changes what the reader can see and recover.
Real interfaces receive file names, translated labels, user-generated text, and URLs that are much longer than design placeholders. The first goal is to let content wrap without widening its container. Truncation belongs later, and only where the full value remains available through context, expansion, or another accessible path. This topic also connects with CSS Overflow and Web Fonts & Typography.
Allow text to break safely
Example
css
.message {
overflow-wrap: anywhere;
hyphens: auto;
}
.title {
text-wrap: balance;
}overflow-wrap: anywhere gives the browser an emergency break point for long URLs or identifiers. Automatic hyphenation depends on the document language, so set the HTML lang attribute.
Single-line truncation
Example
css
.file-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}An ellipsis hides content. Use it only where the full value remains available through nearby context, expansion, or another accessible interaction.
Multi-line clamping
Example
css
.summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}Indent wrapped lines deliberately
The each-line keyword applies text-indent after forced line breaks as well as at the start of the block. It does not indent every automatically wrapped visual line.
Example
css
.poem {
white-space: pre-line;
text-indent: 1.5em each-line;
}Text Overflow Properties
| Property | Purpose | Example |
|---|---|---|
| overflow-wrap | Breaks an otherwise unbreakable string when necessary. | overflow-wrap: anywhere |
| word-break | Controls where words may break. | word-break: break-all |
| white-space | Controls collapsing and wrapping of white space. | white-space: nowrap |
| text-overflow | Signals clipped inline content. | text-overflow: ellipsis |
| text-indent: each-line | Indents the first line and lines after forced breaks. | text-indent: 1.5em each-line |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text Wrapping example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.message {
overflow-wrap: anywhere;
hyphens: auto;
}
.title {
text-wrap: balance;
}
.file-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.poem {
white-space: pre-line;
text-indent: 1.5em each-line;
}
</style>
</head>
<body>
<main><h1 class="title">A balanced heading for a narrow content card</h1><p class="message">https://example.com/a/very/long/unbroken/path/that/must/not/break/the/layout</p><p class="file-name">quarterly-financial-report-final-revised.pdf</p><p class="summary">This longer summary demonstrates a multi-line clamp while keeping the card height under control.</p></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| overflow-wrap | 23 | 18 | 49 | 7 |
| text-wrap: balance | 114 | 114 | 121 | 17.5 |
| text-indent: each-line | 146 | 146 | 121 | 15 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Clamping is a presentation decision, not a content strategy. Important instructions and validation messages should never be clipped.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Plan how real content wraps before reaching for truncation, and never clip information a user must read.
Test wrapping with the longest plausible content and with the document’s actual language set. Use ellipsis and line clamping for optional previews, never for errors, instructions, prices, or other information a person must understand before acting.