I usually loathe to resort to non-standards tags to do things. I think I saw your post about this on the Opera forums and responded in the negative to it, but I’ve had some time to think on a better standards compliant answer; here’s what I’ve come up with.
The ‘real’ answer should probably be the unicode #8203; character - a zwsp (zero width space) - but as was noted on the opera forums this character has… problems. I don’t much care for relying on unicode characters as a solution anyways.
The best solution is to wrap it in another tag, but that can get ugly since you’d need a class on it… or do you?
One of the rarely used tags is DEL - deleted text. If we wrap our #8203; in DEL, we can skip using classes if we don’t plan on using DEL for anything else, then use a few CSS tricks to ‘hide it’ while still having it provide our breaks.
So:
<del>​&​#8203;</del>
(de-entity the ampersand in the working copy, the forums seems to be screwing with that)
With this for CSS:
del {
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
visibility:hidden;
overflow:hidden;
font-size:1px;
width:1px;
margin-right:-1px;
}
The inline-block lets us set a width, the visibility:hidden hides it when IE 6 and 5.5 try to render the unknown character block, the overflow chops off should some browser ignore our font-size declaration and override the width (IE 5.01), the font-size fixes a line-height issue across all browsers except FF and the IE container width bug, we then set a width, and a negative margin to make it zero width for calculating flow.
It’s not as simple or clean as a WBR, but it works from IE 5.01 to IE8, as well as all modern browsers and at least it uses valid markup… and if you don’t care about versions of Firefox prior to 3.0, you can get rid of the two -moz properties for valid CSS as well.
Sometimes you gotta go with what works everywhere.
— EDIT —
DUH, I forgot about a quirk in the CSS specification - and it’s a fun one…
Inline-block level elements inherently break a word’s run-in. That means you don’t actually need the zero width space inside the DEL tag… and IE in quirks mode (5.x) treats all inline-level tags as word-breaks anyhow.
So all you need is:
<del></del>
using the above CSS… You can cut the CSS all the way down to :
del {
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
}
If you don’t care about it breaking in IE 5.01 (it still works in 5.5)… So if you are willing to drop FF 2.x/earlier, you could cut the CSS all the way down to:
del {
display:inline-block;
}
That’s a lot simpler. Too bad there’s no rarely used self closing inline-level tag we couldn’t sandbag with… but DEL does the job well enough, and it’s not like it’s content we need to worry about semantically being ‘deleted’. A simple empty DEL set to inline-block… could be far worse.
Though I might be tempted to use the larger version with the zwsp inside it so that it works when CSS is not present.