The HTML <wbr> tag
Quick answer
The HTML <wbr> element marks an optional line-break opportunity — a point where the browser may break a long, unbreakable string (like a URL) if it needs to, but will not otherwise. It is a void element and does not force a break like <br>.
Overview
The <wbr> (word break opportunity) element marks a point where a long, unbroken string may wrap if it would otherwise overflow its container. It is handy inside long URLs, file paths, or identifiers that have no spaces to break at.
Unlike <br>, it never forces a break — it only permits one at that exact point if the browser needs it. When the text fits, nothing happens; when it would overflow, the browser may break there rather than spilling out or stretching the layout.
Syntax
<p>https://example.com/<wbr>very/<wbr>long/<wbr>path</p>Example
<p style="width:140px;border:1px solid #ccc;">supercali<wbr>fragilistic<wbr>expialidocious</p>Best practices
- Insert
<wbr>at sensible break points inside long URLs, paths or identifiers. - Remember it only permits a break — it never forces one like <br> does.
- For automatic breaking of long strings, the CSS overflow-wrap: break-word is often simpler.
- It is a void element — no closing tag and no content.
Frequently asked questions
What is the wbr element for?
To suggest an optional line-break opportunity inside a long unbreakable string, such as a URL, so it can wrap instead of overflowing.
What is the difference between wbr and br?
<br> always forces a line break;
<wbr> only permits one at that point if the text would otherwise overflow.Should I use wbr or CSS to break long URLs?
For automatic handling, the CSS overflow-wrap: break-word is usually simpler. Use
<wbr> when you want to choose the exact break points.Does wbr need a closing tag?
No. It is a void element written as
<wbr>.