The wbr Tag

The wbr tag is an invisible helper. It tells the browser: here is a safe place to break this word or URL if the line runs out of room. Nothing renders, nothing changes visually. The tag only acts when the text would otherwise overflow.

Long unbroken strings are the problem. A word like supercalifragilisticexpialidocious or a long URL has no spaces, so the browser cannot wrap it and it spills out of its container, pushing the layout sideways. Wbr hands the browser safe cutting points.

It matters most on mobile and in narrow columns, where overflow is common. The tag works in every browser. It exists because URLs and long technical words are unavoidable, and overflowing text is a cheap, avoidable wart on a page.

Where to put the breaks

Put wbr between chunks of a word and inside URLs after every slash and dash. The tag has no visible effect when the line fits. It only does something when the text would otherwise overflow, so you can add as many as you like without risk.

<p>This link is long: https://example.com/<wbr>category/<wbr>very-long-article-name</p>

Wbr vs spaces and hyphens

A regular space always allows a break, which can split things you want kept together. A hyphen adds a visible mark even when no break happens. Wbr allows a break only when needed and shows nothing otherwise. That middle ground is exactly what URLs need.

Syntax

Supercali<wbr>fragilistic<wbr>expialidocious

https://example<wbr>.com/docs<wbr>/very-long-path<wbr>/file.html