You build a nice card, drop some text into it, and everything looks great — until a user pastes a 60-character URL or types a giant unbroken word. Suddenly the text barges right through the side of the box, a horizontal scrollbar appears, and your whole layout looks broken. It’s one of the most common ways real-world content quietly wrecks a clean design.
The good news: CSS gives you a precise set of tools for exactly this. You can decide whether text wraps or stays on one line, whether long words break mid-word, whether overflowing text gets a tidy …, and even how many lines a paragraph is allowed to take before it gets cut off. This article walks through all of them so that no piece of text — however weird — can ever break your layout again.
Why text overflows in the first place
By default, browsers wrap text at spaces. A normal sentence flows onto multiple lines because there’s a space to break at every few words. The trouble starts when there’s no convenient place to break:
- A very long word:
pneumonoultramicroscopicsilicovolcanoconiosis - A URL with no spaces:
https://example.com/some/really/long/path?x=1&y=2 - An email address, a hash, an API key, a file path
Because these have no spaces, the browser treats each one as a single unbreakable unit. If that unit is wider than its container, it simply pokes out the edge rather than wrapping. This is closely related to the broader CSS Overflow behavior, but text has its own dedicated set of properties — and those are what you really want to reach for here.
.card {
width: 200px;
/* A long URL inside this will overflow past 200px */
}Let’s go property by property, starting with the one that controls wrapping itself.
white-space: wrap or don’t wrap
The white-space property controls two things at once: whether text wraps, and how runs of whitespace (spaces, tabs, newlines) are handled. The values you’ll use most:
.normal { white-space: normal; } /* default — wraps, collapses spaces */
.nowrap { white-space: nowrap; } /* never wraps — one long line */
.pre { white-space: pre; } /* keeps spaces & newlines, no wrap */
.pre-wrap { white-space: pre-wrap; } /* keeps spaces & newlines, DOES wrap */
.pre-line { white-space: pre-line; } /* collapses spaces, keeps newlines */Here’s what each one actually does:
| Value | Wraps? | Collapses spaces? | Keeps newlines? |
|---|---|---|---|
normal |
Yes | Yes | No |
nowrap |
No | Yes | No |
pre |
No | No | Yes |
pre-wrap |
Yes | No | Yes |
pre-line |
Yes | Yes | Yes |
The two stars here are nowrap and pre-wrap. Use nowrap when you want text to stay on a single line no matter what — perfect for a button label or a table cell you don’t want breaking. Use pre-wrap when you’re displaying something where the original spacing and line breaks matter, like code or a user’s message, but you still want it to wrap instead of overflowing.
nowrap is half of the ellipsis trick
You’ll see in a moment that text-overflow: ellipsis only works on a single line. That’s why white-space: nowrap almost always shows up right next to it — first you force the text onto one line, then you cut off the part that doesn’t fit. They’re a team.
overflow-wrap: break long words only when needed
Now for the property that solves the long-URL problem. overflow-wrap (older name: word-wrap) tells the browser it’s allowed to break inside a word, but only if that word would otherwise overflow its container:
.card {
width: 200px;
overflow-wrap: break-word;
}With break-word, normal text still wraps nicely at spaces as usual, but that one monster URL or giant word will now break across lines so it stays inside the box. This is the polite option: it only breaks words when it absolutely has to.
/* The values */
.a { overflow-wrap: normal; } /* default — only break at spaces */
.b { overflow-wrap: break-word; } /* break long words to avoid overflow */
.c { overflow-wrap: anywhere; } /* like break-word, also affects min-width sizing */For 95% of real situations, overflow-wrap: break-word is the line you want. It’s the single best defense against user-generated content blowing out your layout.
word-wrap is the same thing
You’ll still see word-wrap: break-word in lots of code. That’s the original Internet Explorer name, and browsers keep it around as an alias for overflow-wrap. They do the same job — overflow-wrap is the modern, standard spelling, so prefer it in new code.
word-break: a more aggressive break
word-break is overflow-wrap’s more forceful cousin. Instead of “break a long word only if it would overflow,” it can break words much more eagerly:
.x { word-break: normal; } /* default behavior */
.y { word-break: break-all; } /* break between ANY two characters to fit */
.z { word-break: keep-all; } /* don't break CJK text between characters */The interesting value is break-all. With it, the browser will break a line between any two characters if needed — even mid-word, even when a softer break was possible. This can look ugly for regular prose (words get chopped in odd places), so reach for it sparingly. It’s mainly useful for tight columns of dense data, like a narrow cell showing a long hexadecimal hash.
So how do you choose between the two?
overflow-wrap: break-word→ your default. Keeps normal words whole, only breaks the truly oversized ones. Best for readability.word-break: break-all→ use when even the layout matters more than pretty line breaks, e.g. a fixed-width box that must never overflow, period.
hyphens: break words with a dash
For long words in flowing text, you can let the browser hyphenate — inserting a - at a sensible syllable boundary when it breaks a word across lines:
.article {
hyphens: auto;
}hyphens: auto produces noticeably more polished paragraphs, especially in narrow columns, because words break at natural points with a hyphen instead of leaving awkward gaps. There’s one catch: it relies on the browser knowing the language’s hyphenation rules, so you should set the language on your HTML for it to work well:
<html lang="en">The values are none (never hyphenate), manual (only at your suggested break points, like ­), and auto (let the browser decide). For body text in justified or narrow layouts, hyphens: auto is a small touch that makes typography look a lot more professional.
text-overflow: the ellipsis (…)
Now the famous one. text-overflow controls what happens to text that’s clipped at the edge of its box — and its star value, ellipsis, replaces the cut-off part with a tidy …:
.truncate {
white-space: nowrap; /* 1. keep it on one line */
overflow: hidden; /* 2. clip what doesn't fit */
text-overflow: ellipsis; /* 3. show … instead of a hard cut */
}Those three lines together are the truncation pattern, and you’ll write them constantly — for card titles, list items, file names, anything that needs to fit on one line and gracefully trail off. All three are required:
white-space: nowrapforces a single line (ellipsis doesn’t work on wrapped text).overflow: hiddenactually clips the overflow.text-overflow: ellipsisswaps the clipped end for….
text-overflow does nothing on its own
A super common mistake is writing text-overflow: ellipsis; by itself and wondering why nothing happens. On its own it’s inert — it only kicks in when text is being clipped by overflow: hidden on a single nowrap line. Forget either of the other two lines and you’ll get no dots. Always treat them as a set of three.
<div class="truncate" style="width: 150px;">
This title is far too long to fit on one line
</div>
<!-- Renders as: "This title is far too long t…" -->Clamping to multiple lines
The classic ellipsis trick only works on one line. But what if you want a description to show, say, three lines and then trail off with …? That’s line-clamp, and it’s perfect for cards and previews:
.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* show 3 lines, then … */
overflow: hidden;
}Yes, the syntax is oddly verbose and full of -webkit- prefixes — that’s a historical quirk, but it’s reliably supported across all modern browsers, so you can use it with confidence. Change the 3 to whatever line count you want. This is how nearly every product card, article preview, and comment snippet limits its text to a neat block.
/* The modern standard property also exists: */
.clamp-modern {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3; /* standard version, growing support */
overflow: hidden;
}Include both the -webkit-line-clamp and the unprefixed line-clamp for the best coverage — the prefixed one does the heavy lifting today, and the standard one future-proofs you.
Putting it together: a safe card
Let’s combine these into a card that simply cannot be broken by bad content — a long title that truncates, a description that clamps to three lines, and a URL that wraps instead of overflowing:
.card {
width: 280px;
padding: 16px;
}
.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* one-line title with … */
}
.card-desc {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden; /* description capped at 3 lines */
}
.card-url {
overflow-wrap: break-word; /* long links wrap, never overflow */
}<div class="card">
<h3 class="card-title">A surprisingly long product title that won't fit</h3>
<p class="card-desc">A description that might run on for quite a while but will
be neatly cut off after three lines so every card stays the same height.</p>
<a class="card-url" href="#">https://example.com/a/very/long/path/that/wraps</a>
</div>No matter what content a user throws at this card — a wall of text, a giant unbroken word, a sprawling URL — it holds its shape. That’s the whole goal: a layout that stays calm under messy, real-world input.
Best practices
A few habits that will save you from layout bugs down the road:
- Add
overflow-wrap: break-wordto any container that shows user-generated content — comments, usernames, message bodies, search results. You can’t predict what people will paste. - Remember the ellipsis trio.
white-space: nowrap+overflow: hidden+text-overflow: ellipsis, always all three together. - Prefer
overflow-wrap: break-wordoverword-break: break-allfor normal text — it only breaks when necessary and keeps prose readable. Savebreak-allfor dense, fixed-width data. - Set
langon your<html>sohyphens: auto(and the browser’s spell-checking and screen readers) work correctly. - Use
line-clampfor previews instead of cutting text in JavaScript — it’s faster, responsive, and adapts automatically when the box resizes. - Test with the worst content you can imagine. Paste a 200-character word, a long email, a foreign URL. If it survives that, it’ll survive your users.
If you want a refresher on how boxes get their size in the first place — which is what all this overflow behavior depends on — the CSS Box Model article covers the width, padding, and content rules that decide when text starts spilling.
Wrapping up
Long, messy text is one of the most reliable ways real content breaks an otherwise pristine layout — and now you’ve got the full toolkit to handle it:
white-spacedecides whether text wraps (normal,pre-wrap) or stays on one line (nowrap).overflow-wrap: break-wordbreaks long words only when they’d overflow — your everyday safety net.word-break: break-allbreaks more aggressively for tight, data-heavy columns.hyphens: autoadds polished, dashed line breaks in flowing text (setlangfor it).text-overflow: ellipsis(withnowrap+overflow: hidden) gives you the clean single-line….line-clampcaps a paragraph at a set number of lines with a trailing….
Master these six and your layouts become genuinely bulletproof against whatever text gets thrown at them. Combined with a solid grasp of responsive design, you’ll have content that looks intentional on every screen size and with every kind of input.
