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


Prevent QuickTime from loading in your startup menu when Windows boots up.  more »

Ever since I discovered F.lux for my desktop computer (F.lux helps get rid of of blue screen light at night from your computer monitor), I've been waiting for Apple to enable this functionality on the iPhone screen. Staring into a computer/phone screen...  more »

This article shows the way of converting a movie DVD to Kindle Fire tablet. DVD to Kindle Fire Converter is a professional DVD to Kindle Fire converting tool to help you rip/convert DVD movie to H.264/MPEG-4 video which are compatible with Kindle Fire....  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 »

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 »

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 »

There's a good chance that if you're database driven application is running into the following sql error message that says "String or binary data would be truncated", that the error is being caused by an issue in a SQL statement or in the SQL code of a...  more »

Here's how you can UrlEncode the plus sign (+) in a URL querystring in ASP.NET and then retrieve the plus symbol after UrlDecoding the string. In this example, I will do a postback and redirect the Server.UrlEncoded string to another page. First we will...  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 »

If you are sick of getting the Error Reporting window popping up all the time, then you’ll be happy to know that error reporting can be easily turned off in Windows XP by following these simple steps.  more »

The Windows Live Messenger sign box will by popup by default on computer startup. This can be quite annoying especially if you don't even use the Windows Live instant messenger client. Luckily, you can easily turn off the Windows Live Messenger popup box...  more »

To display line numbers in a Visual Studio.net 2008 code window do the following: Open Visual Studio.net On the Menu bar, Select 'Tools' -> 'Options' In the Options pop-up window, Select 'Text Editor' -> 'All Languages' > 'General'. Note: If you...  more »