White Space, Wrapping and Text Overflow
What Is It?
Wrapping properties decide where text may break, how whitespace is preserved, and how clipped text is indicated.
Properties, Tags and Attributes Explained
white-space: normal collapses whitespace; pre preserves it; pre-wrap preserves it while allowing wrapping.overflow-wrap: anywhere allows long unbroken strings to break when needed.word-break: Controls word-breaking rules; break-all can break between letters.text-overflow: ellipsis indicates clipped inline text when the required overflow conditions are met.hyphens: auto allows dictionary-based hyphenation where supported; provide the correct HTML lang attribute.text-wrap: Controls line wrapping; balance tries to make short blocks more even, while wrap allows ordinary wrapping. Treat enhanced wrapping as optional.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Preserve lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White Space, Wrapping and Text Overflow</title>
<style>
.demo { white-space: pre-wrap; background: #f1f5f9; padding: 12px; }
</style>
</head>
<body>
<div class="demo">First line
Indented line
Third line</div>
</body>
</html>What you see: Newlines and indentation remain visible while long lines can still wrap.
Example 2: Break a long token
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White Space, Wrapping and Text Overflow</title>
<style>
.demo { width: 180px; max-width: 100%; overflow-wrap: anywhere; border: 1px solid #64748b; }
</style>
</head>
<body>
<p class="demo">averylongunbrokentokenwithnospacesatall123456789</p>
</body>
</html>What you see: The long token breaks within the narrow box.
Example 3: Single-line ellipsis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White Space, Wrapping and Text Overflow</title>
<style>
.demo { width: 200px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
</head>
<body>
<p class="demo">A very long lesson title that cannot fit in this small card</p>
</body>
</html>What you see: The end of the line is visually shortened with an ellipsis.
Example 4: Compare word-break values
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White Space, Wrapping and Text Overflow</title>
<style>
.box { width: 150px; border: 1px solid #64748b; margin-bottom: 12px; }
.aggressive { word-break: break-all; }
</style>
</head>
<body>
<p class="box">extraordinarywordwithoutspaces</p><p class="box aggressive">extraordinarywordwithoutspaces</p>
</body>
</html>What you see: The normal unbroken word can overflow. break-all allows breaks between letters; use overflow-wrap: anywhere instead when normal word boundaries should remain preferable.
Example 5: Language-aware hyphenation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White Space, Wrapping and Text Overflow</title>
<style>
p { width: 140px; hyphens: auto; border: 1px solid #64748b; }
</style>
</head>
<body>
<p lang="en">Internationalization and representation need careful consideration.</p>
</body>
</html>What you see: A browser with the appropriate English hyphenation dictionary can insert hyphens. Results vary by browser and installed language support. Use this for narrow editorial columns with the correct lang attribute.
Example 6: Balance a short heading
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>White Space, Wrapping and Text Overflow</title>
<style>
h2 { max-width: 22ch; text-wrap: balance; font-family: system-ui, sans-serif; }
</style>
</head>
<body>
<h2>Learn CSS with small working examples every day</h2>
</body>
</html>What you see: Supporting browsers balance the wrapped heading lines. Use this as a typographic enhancement; ordinary wrapping remains the fallback.
When and Where to Use It
Use wrapping for URLs and user content, pre-wrap for formatted messages, and ellipsis for compact labels with another way to access the full text.
Common Mistake or Useful Tip
text-overflow alone does not create truncation: a constrained width, non-wrapping line, and clipped overflow are needed for this example.
Try It Yourself
Remove white-space: nowrap from the ellipsis example and observe the difference.