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

Justin Germino
I have been obsessed with computers, tech, gadgets and games since the early 1980's having grown up on the Commodore 64 and Amiga computers. By day I work in the IT Security Industry and have been in IT for over 20 years. On my spare time I am a Vlogger, Blogger, Streamer, Gadget Reviewer, affiliate marketer, influencer and entertainer. I am also an avid movie fan, TV Show fan, Anime fan, video game fan and fan of trying anything and everything new.
Justin Germino

@dragonblogger

Content Creator/Owner of https://t.co/iWP6afuOc9 for Tech, Game, Entertainment and streamer at https://t.co/594fXMdMIA
@titaniclynn Thanks, we think so. - 13 mins ago
Justin Germino
Justin Germino
Share Feedback We Want to Hear From You