The wbr tag

<wbr> is not supported by Opera and Safari.

&#8203; is not supported by Explorer Mac and adds a weird glyph in Explorer Windows.

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 width to a minimum.

<wbr>, though being a very ancient tag, is not in any W3C specification. That's W3C's problem, however, not mine.

Alternative - Zero-width spaces

It turns out that the specs have an alternative for wbr, something I wasn't aware of. The tag should be replaced by &#8203;, which means the same.
There is also a non-numerical code for it, but I accidentally deleted the mail that contained it. Kristof, please send again.


Advantage: works in Opera and Safari.

Disadvantage: doesn't work in Explorer (Win and Mac). They show an odd glyph. Explorer Windows applies the breaks correctly, Explorer Mac doesn't.

I have heard, but not tested, 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.

A lovely browser incompatibility conundrum. I have no solution yet. The best solution would be to use both variants, but that'd still cause weird glyphs in Explorer.