Fix <PRE> code going outside <DIV> – Jocha

People who have been following this site for a while know that we recently released an entirely new theme and look.
As always when moving to a new “platform” things work differently. As I was going through old posts to answer comments I noticed some posts with <PRE> code-wraps extended outside the main <DIV>.

Luckily I knew exactly how to fix the problem and now I am going to show you how to fix it.

The <PRE> problem

Notice the code is going outside the main div:

pre-outside-div

The Easy CSS Fix

Simply add the following CSS to your stylesheet and its fixed!

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

The White-Space Property & Why Does It Fix It?

The white-space property tells the browser how to handle “white-space” inside of a div container.
By default any <pre> tag will not wrap at all, rather it will preserve the full lines of your code. By using the “pre-wrap” value you are telling the browser to wrap the text when necessary and on line breaks to keep everything inside the containing div.