Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
wbr
Suggests a word break opportunity — the browser may break the line here if needed, but won't force a break.
Description
The <wbr> (Word Break Opportunity) element suggests where the browser may break a line if it needs to wrap. Unlike <br>, it does not force a break — the break only happens when the content would overflow its container.
This is essential for long URLs, compound words, technical identifiers, and mixed CJK/Latin text where the browser's default word-breaking algorithm fails.
When to Use
- Long URLs: Insert break opportunities after slashes
- Compound words: Long concatenated words that overflow narrow containers
- Technical identifiers: CamelCase class names, package paths
- CJK mixed content: Latin words embedded in CJK text that disrupt line-breaking
- Email addresses: Break opportunities before @ or after dots
When NOT to Use
- For forced line breaks — use
<br> - For hyphenation — use CSS
hyphens: auto - When
overflow-wrap: break-wordis sufficient — CSS is simpler
Examples
Long URLs
<p>https://example.com/<wbr />very/<wbr />long/<wbr />path/<wbr />to/<wbr />page.html</p>Compound words
<p>Super<wbr />cali<wbr />fragilistic<wbr />expiali<wbr />docious</p>Technical identifiers
<p><code>AbstractSingle<wbr />tonProxy<wbr />FactoryBean</code></p>CJK mixed content
<p lang="ja">日本語テキストに<wbr />LongEnglishWord<wbr />が含まれています。</p>wbr vs br
| Element | Break Behavior | Use Case |
|---|---|---|
<wbr> |
Optional — only if needed | URLs, long words, CJK mixed text |
<br> |
Forced — always breaks | Addresses, poetry, structured text |
wbr vs br
<!-- wbr: optional break (only if needed) --><p>https://example.com/<wbr />path/<wbr />to/<wbr />page.html</p> <!-- br: forced break (always) --><address> 123 Main Street<br /> Springfield, IL 62704</address>CSS Alternatives
Consider CSS solutions when <wbr> would be tedious to insert manually:
| CSS Property | Effect |
|---|---|
overflow-wrap: break-word |
Break long words at any point to prevent overflow |
word-break: break-all |
Break between any two characters (aggressive, used by VB for CJK) |
hyphens: auto |
Insert hyphens at syllable boundaries (used by VB's p.justify) |
Use <wbr> when you need precise control over where breaks can occur.
CSS Reference
wbr CSS
wbr { display: inline;}VB explicitly sets display: inline to ensure consistent behavior. The element is a void element (no closing tag) and inserts no visible content.
Accessibility
<wbr>has no effect on screen readers — it is purely visual- The break is invisible; it only affects where line wrapping can occur
- Text content remains intact and continuous for assistive technologies
Related
<br>— Forced line break (addresses, poetry)<code>— Often contains long identifiers that benefit from wbr<a>— Long URLs in link text benefit from wbr- Internationalization — CJK word-breaking rules and mixed-script handling