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


In this tutorial you will learn how to backup the Registry on a Windows computer. Having a backup of your registry is extremely important if you plan to make any manual settings changes to the Registry, because if you make a mistake while messing around...  more »

Here's a quick SQL tip on how to get records beginning with numbers only. Use the query string LIKE '[0-9]%' For example: SELECT u.UserId, u.UserName FROM dbo.aspnet_Users u WHERE u.UserName LIKE '[0-9]%' ORDER BY u.UserName Keep in mind, If you are using...  more »

In this quick tip, you'll learn how to open the Windows Explorer in Windows 7. Move your mouse cursor over the windows Start button and right-click. In the menu that pops up, click on Open Windows Explorer. The Windows Explorer window should open up, and...  more »

I recently began getting a "Storage Almost Full" message on my 16GB iPhone 5. After deleting most of my photos and videos from my iphone and unsyncing all music, I still had only freed up a few GBs of space. Also in iTunes, it was still showing I had 4...  more »

Learn how to make back up copies of your favorite DVDs with the freeware utility called DVD Shrink. You'll be able to back up your copy protected DVD movies to your hard drive, or burn them to disc.  more »

I recently upgraded from Microsoft SQL Server 2005 to Microsoft SQL Server 2008 on my Windows Vista computer. After successfully installing SQL Server 2008, I could not find the Reporting Services instance installed. I have a feeling this was due to the...  more »

Here's a cool little tip that I stumbled upon while previewing a photo using Windows Photo Gallery, which allows you to quickly rename the filename of a photo. In this example, I'm using Windows Vista and will be opening JPEG images. Windows Photo Gallery...  more »

If you do any sort of ASP.NET programming there usually comes a time when you need to get a websites Base URL. The following shows two examples, the first example shows how to get the Base Site Url using C#, which can be used for getting both the...  more »

You're not out of luck if the CD-rom drive on your desktop computer or laptop does not open when you push the button on the drive to eject the CD. You can manually open your computer's DVD or CD-rom drive using a paper clip when the computer is turned...  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 »

Just recently, I decided to setup an old computer with a brand new hard-drive to test out Windows 7 Beta, and while setting this up I decided I wanted to connect the computer to my HP Windows Home Server. The only problem was that I could not find the...  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 »