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


MySQL has several ways to create backups of important data. In this article, I will show you how to create a backup of your MySQL database on a Windows machine using the MYSQLDUMP utility that is included with MySQL.  more »

Find out how-to take a snapshot of what’s on your computer screen and turn the screenshot into an image using graphic software. You'll learn how to take a screenshot of your entire computer screen or just a selected window.  more »

Email messages sometimes are sent with images attached, which make saving the images to your computer fairly easy. However, sometimes the pictures are only embedded within the actual email message without the ability to download any attachments. This can...  more »

You may need to have an image refreshed automatically on a web page in ASP.NET to get the latest image. One instance where you might want the fresh image is if you upload an image that has the same file name as an already existing image file on 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 »

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 »

Here's a quick way to enable programs to 'Run as Administrator' in Windows Vista. Click on the 'Start' menu button, it's the blue circle located on the left-hand side of the Task bar. Now click on 'All Programs' Find the program you want to 'Run as...  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 »

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 »

UPDATE 12-16-2011: If you are using ASP.NET and your website / database is live, and you want to take the database offline, you're better off putting an App_Offline.htm file in your website main directory to first take the website down for maintance (I...  more »

This step-by-step goes through the process of importing delimited text files into a SQL Server 2005 database. The example should help you better understand how to import different types of flat files into SQL Server 2005.  more »

SQL Server Reporting Services can be a pain in the arse to set up correctly for the first time. Even after you've got things running correctly, you can sometimes run into issues, which is exactly what happened to me recently. I had setup my local...  more »