HTML <wbr> Tag: Word Break Opportunity
The <wbr> (Word Break Opportunity) tag in HTML is used to suggest a possible line break in long words or URLs when needed, without forcing a break. If the word fits within the container, the browser will not break it. However, if necessary (e.g., due to small screen sizes or container constraints), the word will break at the <wbr> position.
1. Syntax
-
If the browser window is wide enough, it will display "www.example.com" as a single word.
-
If the text overflows the container, the browser may break the word at
wbr>, displaying:
2. When to Use <wbr>
-
Long Words: To prevent horizontal scrolling by allowing breaks in long words.
-
URLs: Helps break long URLs neatly.
-
Code Snippets: To improve readability in code samples.
3. Examples
Example 1: Breaking a Long Word
✅ If space is limited, the word "verylongwordthatdoesnotfit" will break at very- and continue on the next line.
Example 2: Breaking a Long URL
✅ If the URL is too long, it will break at "longdomainname.com" instead of causing horizontal scrolling.
Example 3: Breaking Code Snippets
✅ Ensures the command is readable without breaking in awkward places.
4. <wbr> vs Other Line Break Options
| Method | Use Case | Example |
|---|---|---|
<wbr> | Suggests a break in long words, but only if needed | super<wbr>longword |
­ (soft hyphen) | Suggests a break and displays a hyphen (-) when broken | super­longword → super- longword |
<br> | Forces a break at that point | super<br>longword |
word-wrap: break-word; (CSS) | Breaks entire words if needed | Used in CSS for text wrapping |
5. Conclusion
-
The
<wbr>tag does not force a break but allows one when needed. -
Useful for responsive design to prevent layout issues.
-
Works well with long words, URLs, and code snippets.
