How to Wrap HTML Text in PRE Tags

I was trying to put in a line of html code that spanned several thousand characters and the code would spew right off the post into my sidebar. I had found instructions to wrap the code in <pre> </pre> tags and was testing a variety of different plug-ins to try and get the code to display like proper code. I had spent at least a good half hour finding a way to wordwrap PRE text and was coming up with a few articles but no solutions.

One of the most detailed articles I found about wrapping html text inside pre tags had information on what to put inside your style.css to make it happen automatically, but no matter which block of code I tried, I was not able to get any of the blocks of code in this article to work properly on my blog.

Example, this will run off the page (deliberate, please excuse the cosmetic mess I am trying to make a point)

jadkfjadkjf;lajfdkl;dsfjdksjfljsdflksdjgfoidhsgihdsjfbjfdkshgkhohcnzxnzcmnz.,xmnvjadkfjadkjf;lajfdkl;dsfjdksjfljsdflksdjgfoidhsgihdsjfbjfdkshgkhohcnzxnzcmnz.,xmnvjadkfjadkjf;lajfdkl;dsfjdksjfljsdflksdjgfoidhsgihdsjfbjfdkshgkhohcnzxnz

I then found from a developer forum that inside the WordPress Editor in the HTML mode you can use a pre tag formatted like this:

<pre style="
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
">
TEXT GOES HERE
</pr>

And this will allow your long code to wrap properly and look like this:

jadkfjadkjf;lajfdkl;dsfjdksjfljsdflksdjgfoidhsgihdsjfbjfdkshgkhohcnzxnzcmnz.,xmnvjadkfjadkjf;lajfdkl;dsfjdksjfljsdflksdjgfoidhsgihdsjfbjfdkshgkhohcnzxnzcmnz.,xmnvjadkfjadkjf;lajfdkl;dsfjdksjfljsdflksdjgfoidhsgihdsjfbjfdkshgkhohcnzxnz

The bad news is that if you click on the Visual Tab in wordpress it will break your PRE tag and remove all the extra style information, so your formatting will be broken.

So remember if you need to do these updates, always work in the HTML Editor of WordPress, or cut/paste into the HTML editor of wordpress. The visual editor has problems with some tags and especially IFrame code.

-Dragon Blogger

Share Feedback We Want to Hear From You