Steven Thompson

It took me a while but I’ve finally found the solution to making Wordpress wrap code within the <pre> tag.

After hours of trying to edit the CSS myself, I decided to give up and see if anyone else had the solution. The following code is the work of one Tyler Longren. It doesn’t seem to be valid CSS, but it works. I’m keeping it for now. Note that this will work in syntax highlighting plugins that use the <pre> command. The one I go with is WP-syntax.

All you need to do is copy and paste this into your stylesheet. Without it, the code will overflow but will scroll and still make the code available. This is a much better solution for clean copy and pasting, but for some of my code I wanted it to be easily readable. This is because I like the idea of example HTML, CSS files….etc with loads of comments. It works as a revision tool for me and I guess might be useful for like-minded people who just like to review tags / code by reading through something like that.

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