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


Today, Microsoft released new FREE Anti-virus and malware protection software called Security Essentials. Microsoft Security Essentials (MSE) is a real-time anti-virus scanner that anyone can download for free and use for personal use. You can use...  more »

In the following step by step, I will take you through the process of deleting existing hard drive partitions, formating and installing Windows XP on a hard drive using the Windows XP installation CD. Note: If you have any data/applications or drivers on...  more »

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

This tutorial goes through the steps of how to import a SQL script file into a MySQL database.  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 »

Windows operating systems (such as Windows Vista), every file extention is associated with a default program. When you open a file, the program that is associated to the file extension will open the file by default. However, you can change or set the...  more »

If you've recently moved a Visual Studio.net web site project (wsp) or web application project(wap) to deploy on Internet Information Services 7 (IIS7) you may have discovered that your Tiny_MCE text editor no longer is showing up and getting the pop-up...  more »

Find out how-to take a snapshot of what’s on your computer screen and turn the screenshot into an image using graphic software. You'll learn how to take a screenshot of your entire computer screen or just a selected window.  more »

Finding Cookies in Windows Vista is a little trickier than you might think. Most cookies are found in the following folder location: C:\Users\<user>\AppData\Roaming\Microsoft\Windows\Cookies\Low So you can just type that into the windows address bar...  more »

Here's how you can determine if your computer is running a 32-bit or 64-bit version of Windows: Click on the Start button -> then click Control Panel, -> then click System and Maintenance, -> and then click System. In the System section, you'll...  more »

For the longest time, I've had a problem of not being able to see all the folders in my Pictures folder when using the Browse button on websites to upload a picture (or file) in Internet Explorer 11 (or in IE10). For whatever reason, some of the folders...  more »

Windows Vista comes with a little known tool called the "Snipping Tool" that allows you to take screenshots of your computer screen. The Snipping Tool has the ability to take 4 different types of screenshots. You can choose from Free-form Snip,...  more »