The wbr tag

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.

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
<wbr>
 Yes No Yes Buggy To be tested Yes Yes Yes Yes
  • Safari obeys only the last <wbr>.
&#8203;
 Buggy Yes Yes Yes To be tested 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 To be tested 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­