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


This tutorial goes through the steps of how to import a SQL script file into a MySQL database.  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 »

Windows Live Messenger can be pretty annoying if you have it installed on your computer, but don't actually use it. Messenger will by default load during start-up of Windows, and also pop-up when opening Internet Explorer or using the Bing search bar,...  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 »

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 »

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 »

The new Routing features in ASP.NET 4.0 are pretty awesome. However, one issue I ran into recently was trying to get the fully qualified urls from Page.GetRouteUrl as string urls to be used in emails messages. Unfortunately, I wanted something that worked...  more »

While using my new Windows 7 64-bit computer, with Visual Studio 2010 running as Administrator, I began getting the following error while trying to open up individual c# files or asp.net files in VS2010: "There was a problem sending the command to the...  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 couple quick SQL database tips for finding and deleting duplicate values in a SQL Server table.To find duplicates in a Column use the following SQL: SELECT ColName1, COUNT(*) TotalCountFROM TableName GROUP BY ColName1 HAVING (COUNT(ColName1) >...  more »

Find out how to quickly and easily rename a group of files or folders at once.  more »

After running a ASP.NET website on IIS 7.5 for the first time on a Windows 7 computer, I was faced with the following error message: Login failed for user 'IIS APPPOOL\ASP.NET v4.0'. Description: An unhandled exception occurred during the execution of the...  more »