Smart wrapping: <wbr> vs zero-width space

Before <wbr>

One of my French colleagues came to me with a wrapping issue — “Montrez-vous” was breaking at the hyphen in Chrome, but not in Firefox.  The CSS hack would have been to make the font-size larger, so the browser broke the word at the right place…. but then a colleague alerted me to the <wbr> tag. According to the HTML5 spec, the wbr element “represents a line break opportunity”. This is a great tool for us at Zoosk, as we translate our site in dozens of languages — and French is certainly more verbose than English (and Greek and German seem to have pretty long words, too). In general, our layouts are designed with localization in mind, but sometimes breaking a word is called for, and we’d like to do that in the right place. Browser support seems pretty solid from my testing (IE7 and up, plus all modern browsers), but I’ve had trouble finding thorough, recent documentation on it. Seems like browsers have supported it for a while, but that it only became part of the spec in HTML5.

After <wbr>

There’s another character that’s quite similar to the wbr element: the Zero Width Space​, aka HTML entity #8203. The only thing it seems to have going for it is its existentially challenging name (a space with no width is like a forest with no trees or Facebook with no friends). Many search results for it are something along the lines of “I have this pesky invisible characters haunting my code — how do I exorcise them?” It’s kind of the opposite of a non-breaking space — it’s a space that allows breaking, but takes up no horizontal room. After a fair bit of reading, the only real distinction I could find between the word break opportunity and the zero-width space was that the wbr tag seems more semantic and human-readable, and the zero-width space adds invisible characters to your rendered HTML that can then get copied and pasted into documents and cause some trouble. I’d love to find out if there any other differences, or why folks might prefer a zero-width space.