How to Wrap Text in an Html PRE tag

A CSS technique for Wrapping Preformated text in the PRE tag.
by

To force long text lines to wrap in an HTML <pre> tag, you can use CSS code to wrap the text. The word-wrapping CSS code below should work to wrap long lines of text within the <pre> tag, in IE, Firefox and Safari...   you may want to test the browsers for yourself just to make sure though.

With that said, simply add the following snipet of CSS code to your main CSS file:

pre
{
    overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
    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 */ /* width: 99%; */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}
 


0
0

Add your comment

by Anonymous - Already have an account? Login now!
Your Name:

Comment:
Enter the text you see in the image below
What do you see?
Can't read the image? View a new one.
Your comment will appear after being approved.

Related Posts


Here's a cool little tip that I stumbled upon while previewing a photo using Windows Photo Gallery, which allows you to quickly rename the filename of a photo. In this example, I'm using Windows Vista and will be opening JPEG images. Windows Photo Gallery...  more »

If you’ve experienced as many problems as I have while trying to Import/Export my Sql Server 2005 database to a hosting provider for the first time, then hopefully this how-to will be of some assistance to you.  more »

If you’re running your own dedicated Windows server, then you may need to know how to setup FTP Sites in Windows Server 2003. In this how-to article I will go through the basics of setting up a windows FTP user account, and an FTP Site, which will allow a user to connect to a website using an FTP program.  more »

So yesterday, I started getting green squiggly line validation warnings at design time on ASP.NET server controls within the HTML Design view for my Visual Web Developer 2010 Express project in Windows 7. Essentially, intellisense on all the ASP.NET...  more »

By using iTunes, you are able to backup your settings, applications and personal data from an iPhone, iPad, or iPod Touch. You'll definitely want to backup your iPhone if you are upgrading to a newer iPhone model (or plan to sell your iPhone) so can...  more »

Not sure what to do with your old Dell computer equipment? If you have Dell computer equipment lying around that no longer works or you don't use, why not recycle it for free at Staples. Here's the details on how to recycle Dell computer equipment at...  more »

If you've ever wanted to get Related Posts based on similar Tags from other Posts using SQL, the following SQL code should help with creating your own SQL query. In this example, the Related Posts are articles, but they could be Blog posts or any other...  more »

If you want to have two seperate Microsoft Excel files open that are separate from each other, that don't load within the same instance of Excel, then keeping reading to find out how to get around this limitation.  more »

Often times when using formula's in Excel, you want to keep just the text values that a formula outputs while deleting the actual formula from the cells. To keep a value in a cell while removing the formula that produced the value try the following: Type...  more »

Having strong yet easily memorized passwords is crucial to protecting your personal information on the internet or your computer. Most people use passwords for many day to day online activities - checking your e-mail, paying your bills, logging into your...  more »

UPDATE: The better way to do this is to use TinyMCE "rel_list" in the javascript for TinyMCE as seen here. Rather than changing the code in the plugin.min.js file, as shown below (after this update). Also just to note that in TinyMCE version 4.5 they...  more »

I just installed the latest version on AOL's Instant Messenger (AIM) version 7.3. The first time after rebooting my computer, I was instantly hit with AIM starting up as well as the AIM Welcome Page popping-up much to my surprise. To say the least, this...  more »