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


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 »

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 »

GodMode is a hidden system control panel in Windows 7 that lets you access all the operating system's control panels from within a single folder without the need to browse options and folders in the Control Panel. To access "GodMode" follow these steps:...  more »

I recently installed SQL Server 2008 database on my local computer and forgot to enable the common language runtime (CLR). Because I had forgotten to turn it on, some portions of my sites were not fuctioning properly due SQL Server not being able to...  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 »

There are a number of online websites that allow you to check the speed of your broadband connection. They are useful, especially when you need to check your internet connection to determine if it's slow and to be able to benchmark it versus other...  more »

If you’re running your own dedicated Windows server, then you may need to know how to setup FTP Sites in Windows Server 2003. In this how-to article I will go through the basics of setting up a windows FTP user account, and an FTP Site, which will allow a user to connect to a website using an FTP program.  more »

Subscribing to a Podcast using iTunes can be accomplished in a couple of different ways. One of the simplest ways is to open iTunes and go to the iTunes Store. From there you can either search for your favorite podcasts using the search box or find...  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 »

If you only have one monitor, but want to split your screen to work in two different windows at the same time, you can now easily do that with Windows 7. The new split screen feature in Windows 7 allows you to view 2 windows side by side on your screen...  more »

If you've recently moved a Visual Studio.net web site project (wsp) or web application project(wap) to deploy on Internet Information Services 7 (IIS7) you may have discovered that your Tiny_MCE text editor no longer is showing up and getting the pop-up...  more »