<wbr>: The WBR Element
Last updated: 2026-10-13
<wbr>The WBR Element
Marks an optional word-break opportunity: the browser breaks here only if needed, without forcing a break or adding a space. Good for long words, URLs or code.
| Category | Text Content |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Self-closing — no closing tag needed |
| Status | Standard |
📝 Syntax
aVeryLongEnglishWord<wbr>canBreakHere▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <wbr> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Unlike <br>, wbr only suggests a break when the line is too long—no forced break otherwise.
❓ FAQ
QWhat does wbr do?
A
<wbr> (word break opportunity) marks a spot where a line may break: in long URLs, long words, or code strings the browser breaks there only when space runs out and otherwise keeps one line. It renders no visible character itself.QHow does wbr differ from CSS word-break?
A
<wbr> controls the exact breakable spots inside the content; CSS word-break/overflow-wrap sets a global rule (break anywhere). For one long string, wbr is more precise; for whole paragraphs, CSS is easier.QWhat is the difference between wbr and the soft hyphen?
AThe soft hyphen (
­) shows a hyphen when the break happens; <wbr> breaks without any symbol. Use wbr for URLs and code identifiers that must not grow hyphens; use shy for natural-language hyphenation.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
