wbr

Updated the wbr page with the ­ entity and a table outlining the resulting incompatibility soup.

This is the blog of Peter-Paul Koch, mobile platform strategist, consultant, and trainer. You can also follow him on Twitter.
Atom RSS

I’m around at the following conferences:

(Data from Lanyrd)

Categories:

Monthlies:

Comments

Comments are closed.

1 Posted by Malcolm on 1 June 2005 | Permalink

<wbr> doesn't work in Konqueror/KHTML (I tested versions 3.2.1, 3.3.2 and 3.4.0).

Interestingly however, <wbr /> works just fine. Firefox and IE seem just as happy with it too.

Unfortunately, this workaround fails in Safari (be it version 1.2.5, 1.3 or 2.0).

2 Posted by nameless on 24 June 2005 | Permalink

Please read http://www.cs.tut.fi/~jkorpela/shy.html

It explains why ­­ should not be used. There are some fundamental flaws with it.

3 Posted by Christopher Walker on 24 September 2005 | Permalink

In Safari 1.3.1, using <wbr></wbr> works well. *Be sure* to include both the opening and closing tags as shown, without any text between. In my tests, using <wbr> or <wbr/> alone did not work. Apple's documentation on this extension implies that some content should go between the opening and closing wbr tags, and thus I tried with some empty content. See:
http://developer.apple.com/documentation/AppleApplications/Reference/SafariHTMLRef/index.html

Many non-English languages, such as Tibetan, need this extension for correct line-breaking when the browser does not yet recognize the proper Unicode-specified breaking rules for a given language.

4 Posted by Malcolm on 26 September 2005 | Permalink

I just checked the <wbr></wbr> solution.

Apart from Safari, it also looks good in IE6/PC, IE5/Mac and Firefox 1.0.7

In Konqueror 3.2.1 some very strange line-breaking results.

5 Posted by Tim Starling on 21 February 2006 | Permalink

Apparently the current IE7 beta handles ​ more or less correctly.

6 Posted by xavi on 22 April 2006 | Permalink

In Safari (1.3.2) you can get the same effect than with using the value "break-word" with the "word-wrap" property of the CSS3 Text Effects Module
http://www.w3.org/TR/css3-text/#word-wrap
And this word-wrap solution is standard (well, I guess that technically not yet, because CSS3 is still a working draft, but it will be a standard eventually and, anyway, it works right now in Safari).

7 Posted by Vitaly on 17 July 2006 | Permalink

The ​ works in IE on Windows (not tested on Mac) if it uses Lucida Sans font. The point is that this font is included in Windows since 95. So we can use something like this:

And define wbr:
.wbr {
font-family: Lucida Sans;
}

8 Posted by Alexander Kulikov on 31 July 2006 | Permalink

Using
ie-dummy:expression(this.outerHTML='&shy;­­­');
style gives IE 5.0 compatibility to wbr tag.