Fix “Pre” Code/Text Going Outside The Main Div

I was writing a response on my WordPress Support Forum just a second ago. I was basically trying to paste a whole bunch of code for someone to create a custom page template – but the code inside my <pre> tags where going outside of the main div container (this is what happens when I use someone else’s free themes). Luckily I knew exactly how to fix the problem and now I am going to show you how to fix it.

The <Pre> Tag Problem

Dam my code is going outside the main container!

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.