Wrapping pre-formatted text

I haven’t notitced that the long lines of my code blocks weren’t wrapping properly in firefox. In Safari everything was just fine. Adding these few lines to the css stylesheet should do the trick.


pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Glad I found that on this website.

19. February 2006 | blog, css, firefox, html, safari | DiggIt!

6 Responses to “Wrapping pre-formatted text”

Harrison said, on 21. March 2006 at 18:04

Hmm. “word-wrap:break-word” doesn’t seem to work in IE 7.0 beta2. Any suggestions?
Chris said, on 22. August 2006 at 16:33

Just FYI, the ‘word-wrap: break-word;’ also makes this work in Safari 2.0.4.
dkt said, on 27. August 2006 at 23:13

It doesn’t works in IE 6, any suggestions?
Lee said, on 17. December 2006 at 11:51

Wow, this is an old discussion but none the less I have been experiencing strange behavior from Safari when I use word-wrap: break-word; on pre elements. I find that it divides words based on the div width but without caring if if the word is chopped in half.

Any Ideas?
Ken said, on 1. February 2007 at 18:50

Under OSX Panther 10.3.9:
Works fine in Firefox 1.5.0.9 , Opera 9.02 and Camino 1.0.3, but has no effect in Safari 1.3.2
Chris said, on 12. December 2007 at 0:25

Why do you people keep specifying the pre style? You have the same problem for any other tag that has a long string of unbroken text. Pre only preserves whitespace, which most people don’t care about anyways. All we’re looking for is a way to make divs in FF wrap ridiculously long strings, which the above code will never do until FF supports word-wrap.

Torsten Curdt’s weblog

Wrapping pre-formatted text

6 Responses to “Wrapping pre-formatted text”

Leave a Reply