HTML <wbr> Tag

What You’ll Learn

The <wbr> tag suggests optional break points in text. This guide covers syntax, use cases for URLs and long strings, comparisons with similar tags, and responsive wrapping best practices.

What Is the <wbr> Tag?

The <wbr> element stands for word break opportunity. It tells the browser where it may wrap text onto the next line if the container is too narrow—without forcing a break when there is enough space.

Use wbr for long URLs, file paths, email addresses, and compound words where breaking at the wrong character hurts readability.

📝 Syntax

Place <wbr> inside the word or string where a break opportunity should be suggested:

YourLongWord<wbr>Here

Syntax Rules

• <wbr> is a void element—no closing tag and no content.
• Insert it at natural break points: before dots, slashes, hyphens, or syllable boundaries.
• You may use multiple wbr elements in one string for several optional break points.
• Valid as <wbr> or <wbr /> in HTML5.

⚖️ <wbr> vs <br> vs <nobr>

🎨 CSS and wbr Together

Combine semantic wbr hints with CSS for robust overflow handling:

.url-text {
  overflow-wrap: break-word;
  word-break: break-word;
}

Use wbr when you want control over where breaks happen. Use CSS when any break point is acceptable.

Examples Gallery

Long URLs, compound strings, and filenames with optional break points in narrow containers.

<p>
  Visit our website at https://www.example<wbr>.com for more information.
</p>

<p>
  Ensure proper authentication<wbr>before accessing sensitive data.
</p>

<code>my-very-long-project<wbr>-documentation<wbr>-file.html</code>

♿ Accessibility

• Improves readability — Controlled breaks help users on small screens read long strings.
• Do not overuse — Too many break points create choppy, hard-to-read text.
• Prefer natural points — Break at slashes, dots, and hyphens rather than mid-word when possible.
• Screen readers — wbr is generally ignored; it does not add spoken pauses like br.

💡 Best Practices