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


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 »

If you ever wanted to change a field to null in a Sql Server 2005 Management Studio result set, you're in luck because there is a quick and easy way to do it.  more »

UPDATE 12-16-2011: For those of you who are getting an "sgen.exe" error message when trying to building your project in Visual Studio that reads something like "Could not load file or assembly or one of its dependencies. Operation is not supported. SGEN"....  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 »

Setting up Gmail on your Apple device can involve a few steps. Here's how to get Gmail setup on an iPhone that uses Apple's Mail app: 1.) Tap the "Settings" app on your iPhone. Then select "Calendar, Contacts and Mail" from the populated list. 2.) Tap on...  more »

By default the Quick Launch bar is no longer enabled in Windows 7, which is where the Show Desktop shortcut icon button resided in previous version of Windows. Don't worry, the Show Desktop feature is still included in Windows 7, it's just been redesigned...  more »

So after using Google Chrome for the first time in a while, it seemed to automatically make itself the default web browser on my computer. Unfortunately, I didn't want this, and after clicking on a hyperlink in an email, it began automatically opening...  more »

Learn how to make back up copies of your favorite DVDs with the freeware utility called DVD Shrink. You'll be able to back up your copy protected DVD movies to your hard drive, or burn them to disc.  more »

Ever since I discovered F.lux for my desktop computer (F.lux helps get rid of of blue screen light at night from your computer monitor), I've been waiting for Apple to enable this functionality on the iPhone screen. Staring into a computer/phone screen...  more »

Here's how you can quickly pair your Apple AirPods with your Windows PC.  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 »

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 »