The wbr tag

Incompatibility soup

The <wbr> tag is very useful but unfortunately too little known. I use it liberally in the great compatibility tables on my site.

<wbr> (word break) means: "The browser may insert a line break here, if it wishes." It the browser does not think a line break necessary nothing happens.

I use it a lot in the great compatibility tables. These tables are very large and very tight, and I wish to avoid horizontal scrollbars, if possible. These scrollbars are mainly caused by the length of method or attribute names, for instance getElementsByTagName(). Therefore I do:

<div class="name">getElements<wbr>ByTagName()</div>

I give the browser the option of adding a line break. This won't be necessary on very large resolutions, when the table has plenty of space. On smaller resolutions, however, such strategically placed line breaks keep the table from growing larger than the window, and thus causing horizontal scrollbars.

Browser compatibility

Unfortunately <wbr> is not supported by all browsers. There are two HTML entities that serve the same purpose, &#8203; and &shy;, but they aren't supported in all browsers, either. Which leads to the following incompatibility soup:

Method or property IE 5.5 IE 6 IE 7 FF 2 FF 3b3 Safari 3.0 Win Opera 9.5b Konqueror 3.5.7
<wbr>
 Yes Yes Buggy No Yes
  • Safari obeys only the last <wbr>.
&#8203;
 Buggy Yes Yes Yes Yes Yes
  • Shows up as an ugly glyph in IE 5.5 and 6, though the wrapping works.
&shy;
 Yes No Yes Yes Yes Yes
When the break is actually inserted, this HTML entity should show up as a dash (-).

A lovely browser incompatibility conundrum. I have no solution yet.

Gordon Mohr proposes using

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

This adds Opera compatibility to <wbr>.

<wbr> test

Test:
TestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestTextTestText

&#8203; test

Test:
TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​

I have heard, but did not test, that non-breaking space glyphs depend on the font you use. For instance, they do not show in the Arial Unicode MS font. Good to know, but it doesn't really solve the problem because most websites use a general font like Arial or Verdana.

&shy; test

Test:
TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­TestText­