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


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

OpenOffice Calc lets users import data from various other systems. It is able to open up files of many other applications and convert them. A. You can check what types of files OpenOffice Calc is able to convert in the File > Open menu. Go to the File...  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 »

So if you have the latest version of Outlook, you may be experiencing the problem that when you click on a link in your email it OPENS up the page in Microsoft Edge. But instead of opening a link in Edge, you want the link to open in your Default Browser,...  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 »

Here's a quick tip on how to get the Taskbar in Windows 7 to become visible while watching a flash video (YouTube, Vimeo, etc.) in full-screen mode. To get the taskbar to show while still in full-screen video mode, simply press the Windows (logo ÿ)...  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 »

No longer getting any sound from your computer? Well the fix for this could be as simple as un-muting the volume control in Windows. I've mistakenly muted the speakers on my laptop many times, due to accidently hitting the volume mute button on the front...  more »

Here are two step by step examples showing you how to move a window that is off screen using the arrow keys on your keyboard.  more »

Are you having trouble installing the Google Adwords Editor on Windows Vista? I was getting a pop-up 'Error 2739' every time I went to install it on my Vista machine. Here's a the solution that worked for me, which allowed me to successfully install Google Adwords Editor on my computer.  more »

Here's how you can UrlEncode the plus sign (+) in a URL querystring in ASP.NET and then retrieve the plus symbol after UrlDecoding the string. In this example, I will do a postback and redirect the Server.UrlEncoded string to another page. First we will...  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 »