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


Prevent QuickTime from loading in your startup menu when Windows boots up.  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 »

I recently ran into the following error while trying to get Elmah to work / complie with my Web Application Project in Visual Studio 2010: Could not load file or assembly 'file:///C:\Users\DOUGDELL2\Documents\Visual Studio...  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 »

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 »

The default settings in Visual Studio 2010 Professional do not automatically show the Solution file by default in the Solution Explorer sidebar. This can be a bit of a problem if you are trying to add another project to your existing solution. To get the...  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 tutorial will teach you how to use the SUM function in Microsoft Excel to add column values together in order to calculate a total amount.  more »

Zipping a file or folder up can be a great way to compress the file in order to make the file size smaller and easier to manage. It can be especially useful when you want to send a large file to someone via email, since most email hosts limit the file...  more »

Here's one quick fix for the ASP.NET error System.FormatException: Input string was not in a correct format. when you are using a DataList with an asp:Button control and are trying to get the CommandArgument using the DataList_RowCommand. Keep in mind...  more »

Here are two step by step examples showing you how to move a window that is off screen using the arrow keys on your keyboard.  more »

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 »