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 SQL Server 2008 Management Studio, you may want to change the default settings to allow you to edit more than the 200 rows at a time, or select more than 1000 rows, which are the default settings for SQL Server. To modify "Edit Top 200 Rows" or "Select...  more »

To create a border outline for a transparent rectangle or circle in Photoshop do the following: Select the "Rectangle Marquee Tool" (or use the "Circle Marquee Tool" for drawing an oval) and then draw an outline for the border area. Go to the "Edit" menu...  more »

If you've been using Windows Mail on a Windows Vista computer, and upgraded to a Windows 7 computer you may want to copy over your email information from Windows Mail to the newer Windows Live Mail email client on Windows 7. As it stands now Windows Mail...  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 »

So here's a quick tip on how to fix the following SQL Server "SqlDateTime overflow" error. System.Data.SqlTypes.SqlTypeException SqlDateTime overflow. Must be between 1/1/1753 12:00:00 AM and 12/31/9999 11:59:59 PM. The reason that you are probably...  more »

On a number of a occassions I've run into the following ASP.NET / IIS7 error after uploading my newly built Visual Studio.net web project site into IIS (where the site had previously been working fine): 'Timeout expired. The timeout period elapsed prior...  more »

I recently discovered an issue after I upgraded to TinyMCE 4.1.3 version text editor in my ASP.NET web pages that was causing the formatting of my <pre> tags to not keep its line break formating on PostBack. At first I thought this might be a CSS...  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 »

OpenOffice Calc lets users import data from various other systems. It is able to open up files of many other applications and convert them. A. You can check what types of files OpenOffice Calc is able to convert in the File > Open menu. Go to the File...  more »

Learn how to add two or more cells together in Microsoft Excel.  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 »

Copying text from the command prompt is pretty easy, but it's not all that straightforward if you've never done it before. Knowing how to copy text from the command prompt can come in handy, especially if you need to show someone else (like a forum user)...  more »