CSS: Make <pre> Text to Wrap

I deal with quite some code examples across some of my blogs and sometimes they contain too long lines to fit in nicely, which makes it hard to read the latter part of a long line. But you still need to maintain the pre-formatted text with the <pre> tag.

The solution is to use CSS to prescribe the <pre> tag to wrap the lines. Just add this in your stylesheet:

pre.wrap {
 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+ */
}

And add the “wrap” class to the <pre></pre> blocks that you want lines to wrap naturally:

<pre class="wrap">I will be wrapping at the end of the line width.</pre>
Scroll to Top