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


So here's a quick tip on how to fix the following SQL Server "SqlDateTime overflow" error. System.Data.SqlTypes.SqlTypeException SqlDateTime overflow. Must be between 1/1/1753 12:00:00 AM and 12/31/9999 11:59:59 PM. The reason that you are probably...  more »

The ScanDisk utility that was in previous versions of Windows is no longer available in Windows XP. Not to worry because you can now use the Error-Checking tool to check the integrity of your hard disk.  more »

Here's how you can quickly remove multiple Blank cells in Excel: 1) Select the area of cells or columns you want to have blank cell spaces removed. 2) Then press "Ctrl" + "G" on your keyboard.. this will pop-up the Go To box. 3) Now press "Alt" + "S" on...  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 »

Windows operating systems (such as Windows Vista), every file extention is associated with a default program. When you open a file, the program that is associated to the file extension will open the file by default. However, you can change or set the...  more »

UPDATE 12-16-2011: If you are using ASP.NET and your website / database is live, and you want to take the database offline, you're better off putting an App_Offline.htm file in your website main directory to first take the website down for maintance (I...  more »

There may be a time when you want to get a larger detailed view of a photo on Instagram. Unfortunately, Instragram currently doesn't have a feature to enlarge or magnify photos within the Instagram iphone app. However, with a little change to your iPhone...  more »

Here's how you can determine if your computer is running a 32-bit or 64-bit version of Windows: Click on the Start button -> then click Control Panel, -> then click System and Maintenance, -> and then click System. In the System section, you'll...  more »

You may need to have an image refreshed automatically on a web page in ASP.NET to get the latest image. One instance where you might want the fresh image is if you upload an image that has the same file name as an already existing image file on the...  more »

Do you know that your used printer inkjet and toner cartridges can be recycled? Yes, you can definitely use them again. You can even earn money from them after they've run out of ink. Below are the steps on how you can do just that. 1.) Go to OfficeMax,...  more »

I recently moved my sites over to a new web server that has "Windows Server 2008 R2" installed. The older server had just been running "Windows Server 2008". After moving my sites over I discovered that my AJAX Toolkit AutoComplete functionality had...  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 »