Forward-slash suppresses word wrap in Windows IE

by Paul Novitski, 20 March 2006

The goal:

Normal Latin word wrap, achieved by separating words with white-space:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vulputate felis ut est. Vivamus congue. Nullam consequat. Etiam elit ipsum, pulvinar in, commodo sed, malesuada et, wisi.

The problem:

In Internet Explorer, word wrap is suppressed when white-space is followed by a virgule (forward-slash):

Lorem /ipsum /dolor /sit /amet, /consectetuer /adipiscing /elit. /Suspendisse /vulputate /felis /ut /est. /Vivamus /congue. /Nullam /consequat. /Etiam /elit /ipsum, /pulvinar /in, /commodo /sed, /malesuada /et, /wisi.

Solution 1:

Insert a zero-width tag of content between space & virgule:

Lorem  /ipsum  /dolor  /sit  /amet,  /consectetuer  /adipiscing  /elit.  /Suspendisse  /vulputate  /felis  /ut  /est.  /Vivamus  /congue.  /Nullam  /consequat.  /Etiam  /elit  /ipsum,  /pulvinar  /in,  /commodo  /sed,  /malesuada  /et,  /wisi.

HTML: Lorem <i>&nbsp;</i>/ipsum <i>&nbsp;</i>/dolor ...

CSS: i { font-size: 0px; }

Solution 2:

Insert an image between space & virgule (suggested by Thierry Koblentz):

Lorem /ipsum /dolor /sit /amet, /consectetuer /adipiscing /elit. /Suspendisse /vulputate /felis /ut /est. /Vivamus /congue. /Nullam /consequat. /Etiam /elit /ipsum, /pulvinar /in, /commodo /sed, /malesuada /et, /wisi.

HTML: Lorem <img src="" alt="" />/ipsum <img src="" alt="" />/dolor ...

CSS: img { width: 0px; }

Unsuccessful solutions:

1. Inserting an empty tag between space & virgule:

Lorem /ipsum /dolor /sit /amet, /consectetuer /adipiscing /elit. /Suspendisse /vulputate /felis /ut /est. /Vivamus /congue. /Nullam /consequat. /Etiam /elit /ipsum, /pulvinar /in, /commodo /sed, /malesuada /et, /wisi.

HTML: Lorem <i></i>/ipsum <i></i>/dolor ...

2. Surrounding virgules with SPANs:

Lorem /ipsum /dolor /sit /amet, /consectetuer /adipiscing /elit. /Suspendisse /vulputate /felis /ut /est. /Vivamus /congue. /Nullam /consequat. /Etiam /elit /ipsum, /pulvinar /in, /commodo /sed, /malesuada /et, /wisi.

HTML: Lorem <span>/</span>ipsum <span>/</span>dolor ...

3. Replacing the virgule with the HTML entity &#47;:

Lorem /ipsum /dolor /sit /amet, /consectetuer /adipiscing /elit. /Suspendisse /vulputate /felis /ut /est. /Vivamus /congue. /Nullam /consequat. /Etiam /elit /ipsum, /pulvinar /in, /commodo /sed, /malesuada /et, /wisi.

HTML: Lorem &#47;ipsum &#47;dolor ...

4. Using CSS3 { word-break: break-all; } breaks between characters at the block width, not at Latin word breaks:

Lorem /ipsum /dolor /sit /amet, /consectetuer /adipiscing /elit. /Suspendisse /vulputate /felis /ut /est. /Vivamus /congue. /Nullam /consequat. /Etiam /elit /ipsum, /pulvinar /in, /commodo /sed, /malesuada /et, /wisi.

This phenomenon is observed in the following Windows browsers: