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


When a Windows XP, Vista, or Windows 7 program locks up and says "Not Responding" it can be quite annonying having it to wait for the program to snap out its non-responding state. Sometimes you don't want to wait a few minutes to have the program come...  more »

Here's how to install Internet Information Services (IIS7) on a Windows 7 (or Vista) computer so that ASP.NET websites will run on the IIS7 web server. First, you will want to make sure that you are signed into an account with Administrator access on your...  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 »

So below I'm going to share with you a fairly easy to use and understand ASP.NET User Control that allows you to pick a Date (with the ajaxToolkit CalenderExtender) and also select the Time of day using a drop down list. I've named the control...  more »

If you like having the Printers selection button on the Vista Start menu, you can easily add it to the menu. Follow these steps to add the Printers button to the Vista Start menu: Right click on an empty area on the Taskbar and then select Properties....  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 »

The default settings in Visual Studio 2010 Professional do not automatically show the Solution file by default in the Solution Explorer sidebar. This can be a bit of a problem if you are trying to add another project to your existing solution. To get the...  more »

This computer tip will help you quickly increase or decrease the size of text on a web page or in an email message for better viewing using a mouse click wheel.  more »

By default the Quick Launch bar is no longer enabled in Windows 7, which is where the Show Desktop shortcut icon button resided in previous version of Windows. Don't worry, the Show Desktop feature is still included in Windows 7, it's just been redesigned...  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 »

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 »

Here's how you can find the text of a particular TextBox witnin an ASP.NET GridView row and then Select and Copy the text to Clipboard with Javascript. First put the following javascript in the HTML of your page (either in HEAD of your html page or...  more »