Gojomo

2005-03-26
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: , , ,


Comments:
Doesn't seem to work in the latest webkit nightlies either, though I didn't test it too heavily.
 
This comment has been removed by the author.
 
In opera 9.23, with the special style to "activate" <wbr>, a glyph appears like when using &#8203; in IE6.

I've found a solution:

wbr {
  width: 0px;
  display: inline-block;
  overflow: hidden;
}

Screenshots:
http://tests.bd.dyndns.org/opera-wbr.html
 
I've come up with a better solution.
Get rid of wbr:after, and only use this style:

wbr { display: inline-block; }
 
It would be nice if ­ version not only displays hyphen at the right side, but also at the left side of new line! (continuation).

I have no idea about this ­ and wbr. Bad that this adds considerable overhead to texts. :( Is there any plans to have automatic hyphenation like in LaTeX in any browser?
 
Post a Comment