The CSS overflow-wrap property
The CSS overflow-wrap property lets a long, unbreakable string — a URL or a long token — wrap onto the next line instead of spilling out of its box. The value you want is usually overflow-wrap: break-word. It only breaks words when they would otherwise overflow, which makes it gentler than word-break: break-all.
Overview
Normally text only wraps at sensible points like spaces. That works until a single unbroken string — a long URL, an email address, a hash — is wider than its container, at which point it punches straight through the side of the box. overflow-wrap is the fix: it permits the browser to break such a string mid-word, but only when it would otherwise overflow.
The value to reach for is break-word. Crucially, it leaves normal words alone and only intervenes for the offending long string, so your text keeps wrapping naturally everywhere else. That restraint is what separates it from word-break: break-all, which chops every word at the edge regardless — fine for some East Asian typesetting, jarring for English prose.
It is a near-essential safeguard anywhere you display user-generated content — comments, chat messages, profile fields — where someone will eventually paste a 200-character link. A single overflow-wrap: break-word keeps that from breaking your layout. There is also anywhere, which behaves like break-word but additionally affects the element's intrinsic minimum width.
Syntax
selector {
overflow-wrap: break-word;
}Values
The overflow-wrap property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
normal |
Only breaks at normal points like spaces. The default. |
break-word |
Breaks a long word only when it would otherwise overflow. The usual choice. |
anywhere |
Like break-word, and also reduces the element's min-content width. |
Example
<style>
div { max-width: 220px; background: #f5f7fb; padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; font: 14px system-ui, sans-serif; }
.wrap { overflow-wrap: break-word; }
</style>
<div class="wrap">Breaks cleanly: https://example.com/a-very-long-url-that-would-otherwise-overflow</div>
<div>Default: the same link overflows because it has no spaces to break at.</div>Best practices
- Add
overflow-wrap: break-wordto any container that shows user-generated text, so a pasted long URL cannot break the layout. - Prefer it over
word-break: break-allfor normal prose — it only breaks the strings that would overflow, leaving ordinary words intact. - Combine it with a sensible max-width so the wrap point is predictable.
- For hyphenated breaks, add
hyphens: autoalongside it where the language supports hyphenation.
Frequently asked questions
How do I stop long URLs from breaking my layout?
overflow-wrap: break-word to the container. The long URL then wraps onto the next line instead of overflowing the box.What is the difference between overflow-wrap and word-break?
overflow-wrap: break-word only breaks a word when it would overflow, leaving normal words intact. word-break: break-all breaks every word at the edge regardless.Is overflow-wrap the same as word-wrap?
word-wrap is the old, non-standard name; overflow-wrap is the standard property and browsers treat them the same.