Make < pre > text wrap with CSS

The <pre> tag text does not wrap by default. This can frustrate web designers trying to employ the pre tag as they witness it's bad behavior within a site layout.

There are two solutions for working with <pre> text. One idea is to make the "pre" text wrap, as we do in this blog. Another idea is to give the "pre" text an overflow property to hide the excess content or make it scrollable.

Here is how to tackle wrapping the <pre> text:

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