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 tip on how to create a Regular Expression to validate a positive number that can optionally have a decimal with decimal places. The Regular Expression will also be valid if there are any whitespace before or after the number. I'm using this Regex...  more »

Here's how you can do a simple validation check for blank spaces in javascript. In the example below, the javascript function first trims the text value to make sure there is no extra white space and then checks the length for 0: function...  more »

In the code below, you will be able to find the baseUrl of your website using javascript. The following javascript code will work when used on your localhost or when it's used in a live site (finds the root url of the domain address). Just add this...  more »

Email messages sometimes are sent with images attached, which make saving the images to your computer fairly easy. However, sometimes the pictures are only embedded within the actual email message without the ability to download any attachments. This can...  more »

So you just got a new computer... now it's time to get your entire iTunes library of music, podcasts, playlists, apps, and purchased files from your old computer to your new computer. The following step-by-step will show you how you can move all of your...  more »

At some point you may need or want to test your computers memory ram to make sure it is work correctly. In Windows 7, you can easily test your memory or RAM using the built in Windows Memory Diagnostic Tool. To do this in Windows 7 follow these steps: In...  more »

It's pretty simple to add more than one clock to your system tray in Windows Vista or 7. Follow these steps to have up to three clocks in different time zones added to the system tray: Open the Control Panel -> then Clock, Language and Region ->...  more »

Here's how you can enable SQL Server Authentication in a SQL Server 2008 database, and then add a User login and password account for connecting to the database. Open SQL Server Management Studio In the Object Explorer sidebar, right-click on the top SQL...  more »

Deleting unwanted apps from iTunes is fairly simple. If you want to delete an app that is in iTunes, which has been downloaded to your iPhone (or iPod Touch), follow these steps: Open iTunes, and on the left sidebar, click on Apps. Find the App you would...  more »

So after using Google Chrome for the first time in a while, it seemed to automatically make itself the default web browser on my computer. Unfortunately, I didn't want this, and after clicking on a hyperlink in an email, it began automatically opening...  more »

Find out how to quickly and easily rename a group of files or folders at once.  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 »