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?
 
if you want get hd amateur porn videos, then click Sperm Receptacles 4 this video link.
 
Nice post .Keep updating UI online training Bangalore

 
me like your posts. post or given problem to many users. to you want to split the videos or the following videos:
See more
> movies2k
> arrival putlockers
> the revenant putlocker
 
Panditji is top astrologer in gurgaon city
 
Post a Comment