Tuesday, May 12, 2009

How to get FireFox to wrap PRE tag text

For some reason FireFox does not wrap code or other text (with no good word-breaking point) that is in a PRE tag. I noticed the problem when I was trying to stop a Blogger template from truncating (cutting of) the end of lines (that were too long). I want FireFox to wrap the long lines just like Internet Explorer. As it turns out, it is quite easy to fix. Just add the following to your CSS styles.

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+ */
}

3 comments:

Anonymous said...

AWESOME..... thanks so very much for this bit of code. works like a charm...

Brent V said...

Anonymous,

So glad it helped! Thanks for the confirmation and feedback.

Brent

Vivek said...

Awesome. Thanks