Wrapping Text Inside Pre Tags

If you use WordPress or just use the <pre> tag to display code on your website you know how it is formatted by default. The text is one long line and can dissappear off the edge of the parent tag.

Well thats no good! so lets add some CSS code to fix that.

How To Wrap

• To do this simply add the following code to your stylesheet

pre {
 overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2 */
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* 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+ */
}

If you check my CSS file you can see this code is used on my site to display the previous code box (With a few additions for colour etc.)