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
Related posts:
- Dealing with a Hacked WordPress Blog Wordpress php files can become hacked and your blog can be compromised, look for aWYoZnVu string in your .php files...
- Edit HTML In New Blogger Interface : Blogger In Draft Edit HTML In New Blogger Interface and other Blogger interface updates and tips....
- Upgrading To WordPress 2.8 I found some noticeable new features right away with WordPress 2.8, including the editor which contains numbered lines now in...
- WordPress 2.9 Features and Functionality Improvements Keith Dsouza from Weblog Tools Collection did an excellent write up showing off the new features of Wordpress 2.9 beta...
- Modify Your WordPress Theme to Align Images Simple lines of css code inserted into your Wordpress stylesheet (style.css) allow you to easily and properly align your images...
Nice share, I was trying to do the same thing sometime ago, I get stock and I have to leave it. I hope to revisit it with the HTML Editor of WordPress, or cut/paste into the HTML editor of wordpress as you suggested.
- spam
- offensive
- disagree
- off topic
Like