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


When using SQL Server 2008, you may receive a Save (Not Permitted Dialog) box pop-up when trying to save changes to an existing table. The dailog box reads: "Saving changes is not permitted. The changes you have made require the following tables to be...  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 »

Not sure what to do with your old Dell computer equipment? If you have Dell computer equipment lying around that no longer works or you don't use, why not recycle it for free at Staples. Here's the details on how to recycle Dell computer equipment at...  more »

So yesterday, I started getting green squiggly line validation warnings at design time on ASP.NET server controls within the HTML Design view for my Visual Web Developer 2010 Express project in Windows 7. Essentially, intellisense on all the ASP.NET...  more »

Learn how to manually initiate the transferring of pictures to your computer with Kodak's EasyShare software.  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 use special characters in a Word document or other text file. With Windows Vista and Windows 7 you can quickly bring up a Character Map, which allows you to copy special characters or symbols, which can then be pasted...  more »

Here's how you can find the text of a particular TextBox witnin an ASP.NET GridView row and then Select and Copy the text to Clipboard with Javascript. First put the following javascript in the HTML of your page (either in HEAD of your html page or...  more »

So my Logitech Wave keyboard was working just fine, then all of a sudden the Space bar key got stuck in the down position. It actually happened while cleaning the keyboard and it's keys (although to be honest, at the time it happened I didn't completely...  more »

Learn how to get the latest security updates and service packs for your Microsoft Windows computer.  more »

Facebook users often don’t think about, or even realize for that matter, how their privacy settings are currently set. You simply assume that only your friends can read your wall posts, see your photos, or get your work, email, or phone information....  more »

This tutorial goes through the steps of how to import a SQL script file into a MySQL database.  more »