If you've ever built a responsive website, you've probably encountered that moment when a long URL, a generated code string, or an absurdly long German compound word breaks your carefully crafted layout. The container stretches, horizontal scrolling appears, or text spills into adjacent columns. It's frustrating and surprisingly common.
Two HTML features handle this cleanly: the <wbr> tag and the ­ entity. They work differently, suit different situations, and both require zero JavaScript. Here's what you need to know about safely breaking long words in HTML.
At a glance
- <wbr> suggests a break point without inserting a character
- ­ inserts a hyphen only when the line actually breaks
- Both only trigger breaks when needed, not on every opportunity
- No JavaScript required
- Browser support is excellent across modern browsers
The Tag
The word break opportunity tag tells the browser where it's allowed to split a long word. Think of it as a suggestion: "If you need to break here, go ahead." You place it inside your text like this:
“`html
<p>super<wbr>califragilistic<wbr>expialidocious</p>
“`
The browser evaluates all the <wbr> positions and breaks only where space constraints actually require it. Critically, it doesn't add any character at the break point itself. When the full word fits on one line, it renders as a normal unbroken string. When it doesn't fit, the break happens cleanly at the most appropriate spot.
This makes <wbr> ideal for readability-sensitive content. Technical documentation, academic papers, or any text where visual cleanliness matters benefits from this approach. The word remains visually intact whether it breaks or not.
The Entity
The soft hyphen entity works similarly but serves a different purpose. When you place ­ in a word, you're telling the browser "insert a hyphen here IF you break the line at this point." The hyphen only appears when the break actually happens.
“`html
<p>super­califragilistic­expialidocious</p>
“`
When the line wraps, you get "super-califragilistic-expialidocious" split across lines. When the full word fits, no hyphen appears. This makes ­ particularly useful for technical terms, compound words, or any content where a hyphen at the break point actually clarifies the split rather than cluttering it.
The soft hyphen is technically a Unicode character (U+00AD), so it works in any HTML context, email templates included.
Our Analysis
Both approaches are non-semantic, meaning they carry no meaning about your content's structure or significance. They're purely presentational hints to the browser's rendering engine.
The practical difference is visual: <wbr> creates a clean break with nothing added, while ­ adds a hyphen when wrapping occurs. Neither forces a break; they merely enable one at those specific points while leaving the browser free to choose different positions if needed.
For most general web content, <wbr> produces cleaner results. Users see uninterrupted words when they fit and smooth wraps when they don't. For long technical identifiers, URLs with hyphens already embedded, or compound words where a hyphen actually aids reading, ­ makes the split more obvious.
CSS alternatives like overflow-wrap and hyphens exist but offer less control. Overflow-wrap tells the browser "break if necessary" without specifying where. The hyphens property uses language dictionaries to decide break points, which works well for natural language but poorly for generated strings or technical content.
A Practical Example
Say you're building a documentation site that displays API endpoint paths like "/users/{userId}/transactions/{transactionId}/items/{itemId}". On mobile, these paths often overflow their containers or trigger unwanted horizontal scrolling.
You can insert <wbr> tags at logical division points:
“`html
<p>/users/<wbr>{userId}<wbr>/transactions/<wbr>{transactionId}<wbr>/items/<wbr>{itemId}</p>
“`
Now the path wraps cleanly at meaningful boundaries. On desktop, users see the full path. On mobile, it breaks at the most readable positions without breaking in the middle of variable names.
What to Watch Next
Browser support for both features is universal across Chrome, Firefox, Safari, and Edge, including their mobile versions. You won't encounter compatibility issues in 2024.
If you need more sophisticated hyphenation for body text, CSS hyphens: auto combined with the lang attribute lets browsers use built-in dictionaries. This works well for multilingual sites where manual break insertion becomes impractical.
For most projects, though, these two HTML tools cover 90% of the long-word problems you'll encounter.
Key takeaways
- Adds invisible break opportunities; adds hyphens only when the line breaks
- Place multiple opportunities and let the browser decide which to use based on container width
- Both are better than relying on browser defaults for technical or variable-length content
- No JavaScript required for either approach
- Browser support is universal across all modern browsers
Frequently asked questions
Can I use both and on the same word?
You can in theory, but it creates confusing behavior. Pick one approach per word for clarity.
Do these work in email HTML templates?
Generally yes, though some email clients strip HTML features. Always test across major email clients.
What's the difference between and CSS overflow-wrap?
Overflow-wrap tells the browser to break if needed but doesn't control where. Gives precise control over break locations.
Are these HTML5 features?
The tag is standard HTML5. The entity has existed since HTML 4 and remains fully supported.
Can I use these to break URLs that are too long?
Absolutely. URLs are one of the most common culprits for layout-breaking long words. Place at slashes and logical boundaries for clean wrapping.