Quick CSS Tip on how to make the pre tag wrap the text inside of it.

I have had to use this only twice in my career as a web developer… but both times this saved my life. Here is the problem, we need to use the pre tag sometimes to have preformatted text display the way it should… but the pre tag makes it not warp (display on a new line if the width is less than the text on the line). So here is the fix for all browsers.

pre {
white-space: pre-wrap;       /* css-3 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5+ */
white-space: -moz-pre-wrap;  /* Older Versions of Mozilla */
}

Enjoy,

Related posts:

1. Simple Cross Browser CSS Layouts (ie6+, ff3+,safari*,chrome*)
2. 10 Awesome jQuery and JavaScript Snippets
3. Detect the browser visitor is using with jQuery
4. jQuery focus on first field trick
5. Top 10 CSS Snippets

Did you absolutely LOVE this article... share it!