On mobile, a very long word, like an email address, a file name, or a long technical string, can overflow its column and break the layout, while an ordinary sentence wraps just fine between words. A browser normally only knows how to break a line at spaces: with no space, it has nowhere to stop, and lets the word overflow rather than cutting it at some arbitrary spot.
The <wbr> tag, short for "word break opportunity", solves exactly this case: it marks a spot inside a word where the browser is allowed to break the line if it needs to, without ever being forced to and without adding any visible character.
Definition
<wbr> is an empty element, with no content and no closing tag, inserted directly in the middle of a word or an overly long string. It represents nothing visible on its own: it works as a simple hint to the browser, a spot meaning "break here if you run out of room", left with no effect at all if room is not actually short.
This optional nature is what sets <wbr> apart from anything resembling a forced line break: that always cuts at the same spot, whether the line is wide or narrow, while <wbr> only breaks when it is genuinely necessary, depending on the width available at the moment the page renders.
Difference from a hyphen or a forced line break
A hyphen typed on the keyboard ("-") is a real character: it always shows, it is part of the text, and it gets copied if a visitor selects the word to paste it elsewhere. It literally changes the spelling of what you wrote, which is a problem for a domain name, a technical identifier, or a hashtag, where adding a hyphen would produce a different string than the original.
<wbr> avoids that flaw: invisible on screen even when it triggers a break, it adds no character at all and disappears entirely from copied and pasted text. A forced line break, by contrast, always cuts at the same spot, even on a wide screen where the word would fit perfectly well in full: it imposes a decision that never depends on the space actually available.
Concrete example
Here is a very long file identifier, shown inside a <code> snippet, with two optional break points offered to the browser, without ever forcing a break.
<p>quarterly<wbr />financial<wbr />report2026.pdf</p>On a wide screen, the file name displays in full, on a single line, as if <wbr> were not even there. On a narrow screen, the browser picks one of the two offered spots to break the line, exactly when room starts running out.
Use cases and best practices
You will mostly meet <wbr> when displaying long URLs, file names, product references, or very long compound words inside a narrow column: a sidebar, a chat bubble, a compact table. Placing the tag at meaningful spots, like right after a slash or a dot in a URL, produces a more readable break than one the browser picks at random.
The technique combines well with CSS properties like overflow-wrap, which let the browser break anywhere as a last resort: <wbr> then offers it precise, clean spots instead, rather than leaving it to choose an arbitrary break point, sometimes right in the middle of a syllable.
Do not expect a hyphen to appear at the break point: <wbr> never displays any character, even when the browser genuinely chooses to break the line there. To check its effect, shrink the window or test on a phone screen: on a wide screen everything looks identical with or without the tag, which sometimes gives the wrong impression that it is not working.
Frequently asked questions
wbr tag add a hyphen where the line breaks?No, never. Unlike a hyphen typed on the keyboard, <wbr> adds absolutely no visible character, neither before nor after the break. The word is simply split across two lines, with no punctuation marking the break, which clearly sets it apart from an ordinary hyphen.
Nothing at all: the browser simply ignores the tag and displays the word intact, on a single line, exactly as if <wbr> were not present in the code. That very absence of effect, as long as there is enough room, is what sets the tag apart from a forced line break, which always cuts at the same spot regardless.
overflow-wrap?Partially. A CSS property like overflow-wrap: anywhere does let the browser break an overly long word, but it picks the break point at random, sometimes right in the middle of a syllable or a technical identifier. <wbr> instead lets you choose precisely the relevant spots, like right after a slash in a URL, and the two techniques combine very well together.