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 »

Ever since moving to a Windows 7 (64 bit) computer, I haven't been able to view Photoshop thumbnail previews of .psd files in Windows Explorer. However, today I decided to find a solution to this anonying problem, so that I could start seeing previews of...  more »

Here's how you can do a simple validation check for blank spaces in javascript. In the example below, the javascript function first trims the text value to make sure there is no extra white space and then checks the length for 0: function...  more »

Subscribing to a Podcast using iTunes can be accomplished in a couple of different ways. One of the simplest ways is to open iTunes and go to the iTunes Store. From there you can either search for your favorite podcasts using the search box or find...  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 »

It's pretty simple to add more than one clock to your system tray in Windows Vista or 7. Follow these steps to have up to three clocks in different time zones added to the system tray: Open the Control Panel -> then Clock, Language and Region ->...  more »

Learn how to manually initiate the transferring of pictures to your computer with Kodak's EasyShare software.  more »

What is Impress? Impress is a presentation software that is delivered with the free OpenOffice suite of programs. It can be downloaded free of charge, and can open presentations created in PowerPoint. Apart from Impress format, you can save your...  more »

Below are the steps to update the firmware on a Linksys E4200 Router. Before getting started make sure you download the latest firmware version to your computer from the Linksys site, go to http://support.linksys.com/en-us/support/routers/E4200 and click...  more »

Here's how you can add "nofollow" tags to links generated by a Sitemap file that is bound to an ASP.NET Repeater control using a SiteMapDataSource. I'm currently using this technique for the footer links of GotKnowHow.com, so if you View Source of the...  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 »

Do you know that your used printer inkjet and toner cartridges can be recycled? Yes, you can definitely use them again. You can even earn money from them after they've run out of ink. Below are the steps on how you can do just that. 1.) Go to OfficeMax,...  more »