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


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 »

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 »

Here's one way to setup your connection string for a SQL Server 2008 Express database for a live website using ASP.NET on Windows Server 2008. Open "Sql Server Configuration Manager" -> the click on "SQL Server Network Configuration" -> then click...  more »

To change directories while in the windows command prompt use "cd" (cd stands for change directory in DOS)To go to a specific directory type the full path, such as: cd c:\ or cd c:\program files\ To go up one level type: cd ..To see what's in the current...  more »

I recently discovered an issue after I upgraded to TinyMCE 4.1.3 version text editor in my ASP.NET web pages that was causing the formatting of my <pre> tags to not keep its line break formating on PostBack. At first I thought this might be a CSS...  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 »

Recently, I decided to begin converting my Visual Studio.net Web Site Projects (WSP) to Web Application Projects (WAP) to take advantage of some of the new Web Deployment features in Visual Studio.net 2010 (see Vishal Joshi's blog for a run through of WSP...  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 »

I recently dealt with an issue of external images not showing in Reporting Services (SSRS) report viewer control within an IIS7 website. When the IIS7 website had it's Application Pool's Managed Pipeline Mode set to "Classic", the external images showed...  more »

This tutorial goes through the steps of how to import a SQL script file into a MySQL database.  more »

In Windows 7, the Recycle Bin seems to be missing from the desktop by default. Fortunately, it's pretty simple to show (or hide) the Recycle Bin on the desktop. To show (or hide) the Recycle Bin on the desktop in Windows 7 follow these steps: Click the...  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 »