| Depr. | Empty | Version |
|---|---|---|
| No | Yes | N/A |
| IE5.5+ | FF1+ | SA1.3+ | OP10 | CH2+ |
|---|---|---|---|---|
| Partial | Partial | Partial | None | Partial |
Syntax
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 ​, 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.
