wbr (HTML element)

Spec
Depr. Empty Version
No Yes N/A
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP10 CH2+
Partial Partial Partial None Partial

Syntax

<wbr>

Description

The wbr element’s purpose is to suggest/hint to the browser where within a word/phrase would be the most appropriate point for it to be broken (indicated with a hyphen) in the event that the browser viewport or containing element is reduced in size such that wrapping occurs.

When the wbr element is used inside the nobr (no break) element, its purpose is somewhat different. Rather than hinting at where a word break may occur, it tells the browser that a word break should occur (simply using a br element inside a nobr would not have any effect).

One approach that you might use which avoids the non-standard wbr element is to use a zero-width space character (sometimes referred to in its abbreviated form “ZWSP”), which has a character entity reference &#8203;, in place of the wbr. However, in my tests this alternative approach worked in all but one browser (Internet Explorer, all versions, created an unsightly box suggesting the character encoding or font was not able to handle this, despite specifying common character encodings of UTF 8 and ISO 8859 and using the browser’s default font styling, ie no CSS styles applied). The advice, therefore, is to test thoroughly!

Example

wbr suggests a few appropriate points in a movie phrase where it could be wrapped:

<p>Remember that song from Mary Poppins 
'Super<wbr>califragilistic<wbr>expialidocious'?</p>

For browsers that support the element, when there is not enough room to render the whole phrase, it may appear as

Remember that song from Mary Poppins 'Supercalifragilistic-
expialidocious'?

Or with even less space:

Remember that song from Mary Poppins 'Super-
califragilisticexpialidocious'?

Use this for…

Hinting where a word break should occur.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial Partial None None None Partial

Opera pays no attention at all to this element and will not break the word phrase. All other browsers will wrap at the point(s) suggested but do not hyphenate the broken word, which may potentially lead to less than desirable results. As such, compatibility is stated as partial (because of the lack of hyphen) for those that did break the text where indicated.

Opera’s lack of support may be patched up with a dash of CSS to insert a ZWSP after each wbr element using the following:

wbr:after {content:"\00200B";}

But this is, of course, no more than a workaround; with CSS disabled or a style sheet missing, the fix stops working.

Given that this is a non-standard element with imperfect support, use the wbr with caution. For an extremely thorough investigation of all the various browser quirks related to this element (and there are quite a few), refer to Jukka Korpela’s excellent Word division in IE and other notes on the nobr markup.

User-contributed notes

Related Products