Cross-browser invisible word-break in HTML/CSS

Problem: you want to provide a 'hint' that a long string can break (word-wrap) in a certain place, but don't want anything -- no hyphen, space, whatever -- to appear there if the break isn't necessary. This is often important when you want to prevent certain text content from forcing layout elements from overgrowing in the horizontal direction.

Peter-Paul Koch's Quirksmode has a rundown of the options and their limitations:

• The entity ­ -- a 'shy hyphen' -- works nicely in IE. (It even displays a hyphen only when the break is taken.) However, it doesn't work in Mozilla, and is buggy on IE/Mac and Safari.
• The entity &8203; -- zero-width space -- works properly in Mozilla, Safari, and Opera. But it leaves a block glyph in IE everywhere used, not just at taken breaks.
• The HTML element <WBR> works in Mozilla and IE, but doesn't cause a break in Safari and Opera.

Koch suggests <WBR> -- at least it works or doesn't work cleanly -- and uses it in Quirksmode's tables.

I think I've got a solution that extends <WBR>'s usefulness to Opera, and maybe Safari. (I don't have a Mac to test.) The trick is to use the CSS 'content' property to insert the character that does work in Opera/Safari after all <WBR> elements. That is:

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

("\00200B" is the CSS escape for &8203;.)

Works for me in Opera 8b3 -- which otherwise did not respect <WBR>. Seems to be harmless in IE, perhaps because of problems with the :after pseudo-element. (If it did start rendering the block glyph in IE, some other tactic could be used to hide the style sheet from IE.)

UPDATE (2005-03-27 16:34): Doesn't work in Safari 1.2.4. Shucks.

Technorati Tags: html, webbrowsers, css, tips

«»