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 »

Learn how to manually initiate the transferring of pictures to your computer with Kodak's EasyShare software.  more »

Here's a quick tip on how you can adjust the mouse pointer speed in Windows 7: Click Start menu, and then open Control Panel. Then click on Hardware and Sound. Now under Devices and Printers, click on Mouse. The Mouse Properties box should pop-up, click...  more »

So after using Google Chrome for the first time in a while, it seemed to automatically make itself the default web browser on my computer. Unfortunately, I didn't want this, and after clicking on a hyperlink in an email, it began automatically opening...  more »

UPDATE 12-16-2011: For those of you who are getting an "sgen.exe" error message when trying to building your project in Visual Studio that reads something like "Could not load file or assembly or one of its dependencies. Operation is not supported. SGEN"....  more »

Turn on Automatic Updates in Windows XP so that new security updates from Microsoft will be automatically downloaded and installed on your computer. By enabling Automatic Updates you will help make your computer safer from internet security threats and viruses.  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 »

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 »

So yesterday I downloaded the new version of iTunes 9, and updated my iPhone with OS version 3.1. Everything seemed to be working great until I went to play my podcast playlists on my iPhone. The podcast playlists were not syncing to my iPhone for some...  more »

This step by step will show you how to scan a picture using Windows‌ Photo Gallery, which should come installed by default on Windows Vista and Windows 7 operating systems. Once pictures are scanned using Windows Photo Gallery, your pictures are...  more »

There may be a time when you want to get a larger detailed view of a photo on Instagram. Unfortunately, Instragram currently doesn't have a feature to enlarge or magnify photos within the Instagram iphone app. However, with a little change to your iPhone...  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 »