CSS for lunch » Make the <pre> tag wrap

Make the <pre> tag wrap

The pre tag stands for preformatted text, but it acts differently in all browsers. Here is a snippet of code that should cover all bases:

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

Thanks to Tero Karvinen for this tip.

Thankfully, in CSS-3, the <pre> tag will be fixed.

This entry was written by Andrew Mager, posted on June 14, 2008 at 12:13 pm, filed under CSS-3, Presentation and tagged css3, ie5.5, mozilla, opera, pre, text, wrap. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

One Comment

Ryan

Posted November 30, 2008 at 5:40 pm | Permalink

Great CSS snippet. Many thanks. In some usages in IE6 and IE7, I was still having problems, but found that specifying a width for the pre tag solved the problem. Some more good discussion on this issue over at http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/.

Post a Comment