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


A regular expression for validating a image url.  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 »

Early today, I received an email from my Grandma who will turn 90 years old in just a few months asking me the following question: "How do I delete two or three files at one time?" In order to answer this somewhat complicated process and make it...  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 »

Have you ever deleted an old podcast episode in iTunes and then wanted to re-download it? To get deleted podcast episodes to show up again in iTunes you could just delete your subscription to the particular podcast, and then resubscribe to the podcast for...  more »

If you like having the Printers selection button on the Vista Start menu, you can easily add it to the menu. Follow these steps to add the Printers button to the Vista Start menu: Right click on an empty area on the Taskbar and then select Properties....  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 »

By using iTunes, you are able to backup your settings, applications and personal data from an iPhone, iPad, or iPod Touch. You'll definitely want to backup your iPhone if you are upgrading to a newer iPhone model (or plan to sell your iPhone) so can...  more »

Here's a cool little tip that I stumbled upon while previewing a photo using Windows Photo Gallery, which allows you to quickly rename the filename of a photo. In this example, I'm using Windows Vista and will be opening JPEG images. Windows Photo Gallery...  more »

To display line numbers in a Visual Studio.net 2008 code window do the following: Open Visual Studio.net On the Menu bar, Select 'Tools' -> 'Options' In the Options pop-up window, Select 'Text Editor' -> 'All Languages' > 'General'. Note: If you...  more »

Here's a couple quick SQL database tips for finding and deleting duplicate values in a SQL Server table.To find duplicates in a Column use the following SQL: SELECT ColName1, COUNT(*) TotalCountFROM TableName GROUP BY ColName1 HAVING (COUNT(ColName1) >...  more »

Here's a quick tip on how you can adjust the mouse pointer speed in Windows 7: Click Start menu, and then open Control Panel. Then click on Hardware and Sound. Now under Devices and Printers, click on Mouse. The Mouse Properties box should pop-up, click...  more »