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


I recently upgraded from Microsoft SQL Server 2005 to Microsoft SQL Server 2008 on my Windows Vista computer. After successfully installing SQL Server 2008, I could not find the Reporting Services instance installed. I have a feeling this was due to the...  more »

In this tutorial you will learn how to backup the Registry on a Windows computer. Having a backup of your registry is extremely important if you plan to make any manual settings changes to the Registry, because if you make a mistake while messing around...  more »

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

UPDATE: The better way to do this is to use TinyMCE "rel_list" in the javascript for TinyMCE as seen here. Rather than changing the code in the plugin.min.js file, as shown below (after this update). Also just to note that in TinyMCE version 4.5 they...  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 »

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 »

The following is a step-by-step example of how you can easily import delimited text files into Microsoft Excel. You can use the Excel Text Import Wizard to quickly import files delimited by Tab, Semicolon, Comma (also known as Comma Separated Value (CSV) file format), Space or Other (you choose), or divided by fixed width columns.  more »

By switching on your iPhone 5's Personal Hotspot feature, you essentailly can turn your iPhone into a WiFi router that other devices can connect to the internet through. You can also establish a password protected network connection which can be shared...  more »

Learn how to add two or more cells together in Microsoft Excel.  more »

At some point, you may need to disable Microsoft Security Essentials (MSE) in order to install other software. To disable MSE follow these steps: Open Microsoft Security Essentials Click on the Settings tab. In the left-hand menu, select Real-time...  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 »

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 »