The CSS Pre Wrap Trick

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,