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


I recently ran into the following error while trying to get Elmah to work / complie with my Web Application Project in Visual Studio 2010: Could not load file or assembly 'file:///C:\Users\DOUGDELL2\Documents\Visual Studio...  more »

Are you backing up your SQL Server 2008 databases daily? You should be, especially if you don't want to lose any of your precious data that you're storing. It's incredibly easy to setup a maintenance plan in SQL Server 2008 to automatically back up one or...  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 »

On a number of a occassions I've run into the following ASP.NET / IIS7 error after uploading my newly built Visual Studio.net web project site into IIS (where the site had previously been working fine): 'Timeout expired. The timeout period elapsed prior...  more »

By default, the Quick Launch bar is not enabled on the Taskbar in Windows 7, as it was in Vista and XP. Instead, you're able to drag and pin programs to the Taskbar in Windows 7 for quick access to programs. However, if you want to bring back the Quick...  more »

If you're making the jump to begin using the Windows Live Mail email client now in Windows 7, from the Windows Mail client that was on Windows Vista, you may want to transfer over your previously entered email account setup details that you had been using...  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 »

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 »

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 »

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 »

One of these useful features is the pivot table function. You can find it in all spreadsheet applications. The present guide shows how to create a pivot table in the Calc application of LibreOffice, which is the Ubuntu Linux version of Calc in...  more »

Below are the steps to update the firmware on a Linksys E4200 Router. Before getting started make sure you download the latest firmware version to your computer from the Linksys site, go to http://support.linksys.com/en-us/support/routers/E4200 and click...  more »