Stop Headlines Breaking in the Wrong Place

A headline that breaks after a short word, a single word stranded on the last line, and a long URL that widens its container are three different defects, and each one usually calls for a different CSS or HTML fix.

They also share an annoying trait: they only exist at certain container widths. The designer screenshots the broken headline on a 384px phone, you open the page at your desktop width and everything looks fine. Bad breaks tend to live in narrow viewport bands that nobody tested, which is why watching session replays at the widths real users actually browsed is often the fastest way to see the defect as it happened.

This article walks through each visible problem, the tool that fixes it, and the reasoning that helps you pick the right one next time.

How Do You Forbid a Break at One Point?

To stop the browser breaking a line at one specific spot, swap the breakable character for its non-breaking twin. A non-breaking space ( , U+00A0) keeps two words on the same line by replacing the ordinary space between them with one the browser is not allowed to break at. That is the fix for a headline that wraps right after “of” or leaves a product name split across lines.

Text can also break where there is no space, most often after a hyphen. The word joiner (U+2060, written as the case-sensitive ⁠ named reference) forbids a break without adding any width, and the non-breaking hyphen (U+2011, ‑, which has no named entity) renders a hyphen that cannot become a break point:

<h2>Shipping the new editor to&nbsp;everyone</h2>
<p>Take the exit for I&#8209;95 north.</p>

How Do You Allow a Break at One Point?

The mirror-image problem is a long string you want to break, but only at spots you choose. Dropping in a <wbr> element offers the browser one extra place to end a line, and nothing visible is inserted if the break is taken. The soft hyphen ­ (U+00AD) marks the same kind of opportunity but renders a hyphen when the break is taken; until then it is invisible. It works under the default hyphens: manual, so it only fails if something has set hyphens: none.

<p>https://docs.example.com<wbr>/reference<wbr>/text-wrapping</p>
<p>The rise of hyper&shy;modularization</p>

Use <wbr> for displayed URLs and identifiers, ­ for real words.

Long Unbreakable Strings: overflow-wrap: anywhere

For user-generated content, long URLs, and tokens you cannot annotate by hand, set overflow-wrap: anywhere and let the browser break as a last resort. The critical detail is intrinsic sizing. Both values let the browser split a long word, but only anywhere lets those emergency break points count towards the element’s min-content width; break-word leaves that width at the length of the whole unbroken string. That is why a flex item containing a long URL can still refuse to shrink and blow out the layout under break-word, but shrinks correctly under anywhere. CSS Text Level 4 defines the two values identically apart from this one difference, and it is the difference people actually hit.

.card { display: flex; gap: 1rem; }
.card-body {
  /* break-word leaves min-content at the full URL width */
  overflow-wrap: anywhere;
}

The anywhere value works in all modern engines, with Safari the last to ship it in 15.4 (March 2022). Older codebases sometimes carry the deprecated word-break: break-word, which ends up wrapping exactly like overflow-wrap: anywhere while leaving word-break itself at its normal behaviour. Replace it.

Where Does word-break: break-all Belong?

word-break: break-all puts the break wherever the line runs out of room, even in the middle of a word. It adds no hyphen, and it will not move a whole word down to the next line to keep it intact, so ordinary prose gets chopped at every line end. That makes it the wrong tool for prose and the right one for strings where word boundaries carry no meaning: commit hashes, API keys, tokens in table cells. Its keep-all value serves the opposite CJK need, suppressing breaks between characters.

.commit-hash {
  font-family: monospace;
  word-break: break-all; /* never on prose */
}

Narrow Columns: hyphens: auto Plus a lang Attribute

Where a narrow column forces mid-word breaks, a dictionary-correct hyphenation point reads far better than a brute-force chop. hyphens: auto does nothing unless the element or one of its ancestors carries a lang attribute. Every language splits words in its own way, so the browser needs to know which one to look up before it can hyphenate. The property is Baseline Widely available, working unprefixed across browsers since September 2023.

<aside lang="en" class="sidebar-note">Uncharacteristically long words wrap cleanly here.</aside>

.sidebar-note { hyphens: auto; }

Headings and Paragraphs: text-wrap balance and pretty

For a lone word on a headline’s last line, text-wrap: balance evens out line lengths by choosing differently among the line’s existing break points; it creates no new ones and does not resize the element’s box, so a balanced heading keeps its original width. Balancing is expensive, so browsers cap it: Chromium stops at six lines, Firefox at ten, and longer blocks wrap normally. text-wrap: pretty targets body copy, spending more layout effort to avoid orphans; it is supported in Chromium and in Safari, which shipped it in version 26, but not yet in Firefox. The text-wrap property itself has worked across the latest browsers since March 2024.

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

Problem-to-Tool Reference

The pattern behind the whole toolkit: identify whether the defect needs a break forbidden, a break permitted, or a wholesale wrapping strategy, then apply the narrowest tool that fixes it. A sensible baseline is overflow-wrap: anywhere on containers that hold user content, balance on headings, and pretty on paragraphs; keep the character-level entities for the individual breaks a designer flags after that.

FAQs

What is the difference between overflow-wrap and word-break?

overflow-wrap steps in only when a word is too long to sit on a line of its own, and everything else wraps as normal. word-break: break-all changes the strategy for the whole element and will split a word wherever the line runs out of room. Use overflow-wrap: anywhere for occasional long URLs inside normal prose, and word-break: break-all only for hashes and tokens where word boundaries carry no meaning.

Is word-wrap the same as overflow-wrap?

Yes. The property started life as a Microsoft extension called word-wrap, picked up the standard name overflow-wrap later, and browsers still accept the old name as an alias for the new one. Write overflow-wrap in new code; current browsers do not need word-wrap as a fallback, and stylesheets that declare both are just setting the same property twice.

When should I use a zero-width space instead of the wbr element?

Use the zero-width space (U+200B, written as the ​ reference) when you can only modify the string itself, such as content stored in a CMS or returned from an API, and use the wbr element when you control the HTML. The zero-width space is an invisible character that stays in the text, so it travels with copy and paste and can interfere with exact-match search.

What happens in browsers that do not support text-wrap: pretty?

The declaration is simply ignored and text wraps with the default line-by-line algorithm, so nothing breaks visually. CSS discards declarations whose values it does not recognize, which makes text-wrap: pretty and text-wrap: balance safe progressive enhancements: supporting browsers get better line breaks, and everything else renders exactly as before. No feature query or fallback declaration is needed.