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


After setting up a new Windows 7 computer with IIS 7.5 and Visual Studio 2010, I tried to start my ASP.NET 4.0 website using the Local IIS web server. However, right off the bat I was hit with the following IIS error message: HTTP Error 500.21 - Internal...  more »

If you are getting the following error while trying to access or deploy a SQL Services Reporting Services (ssrs) report server on your localhost: The permissions granted to user 'domain\username' are insufficient for performing this operation....  more »

In this quick tip, you'll learn how to open the Windows Explorer in Windows 7. Move your mouse cursor over the windows Start button and right-click. In the menu that pops up, click on Open Windows Explorer. The Windows Explorer window should open up, and...  more »

While using my new Windows 7 64-bit computer, with Visual Studio 2010 running as Administrator, I began getting the following error while trying to open up individual c# files or asp.net files in VS2010: "There was a problem sending the command to the...  more »

I just installed the URL Rewrite Module for IIS 7.0 and started playing around with how to setup rules to create search engine friendly URLs. The first rule I decided to setup was to redirect a site to the WWW sub-domain version when it was not typed in...  more »

I recently moved my sites over to a new web server that has "Windows Server 2008 R2" installed. The older server had just been running "Windows Server 2008". After moving my sites over I discovered that my AJAX Toolkit AutoComplete functionality had...  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 »

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 »

If you've ever wanted to get Related Posts based on similar Tags from other Posts using SQL, the following SQL code should help with creating your own SQL query. In this example, the Related Posts are articles, but they could be Blog posts or any other...  more »

To create a border outline for a transparent rectangle or circle in Photoshop do the following: Select the "Rectangle Marquee Tool" (or use the "Circle Marquee Tool" for drawing an oval) and then draw an outline for the border area. Go to the "Edit" menu...  more »

If you're making the jump to begin using the Windows Live Mail email client now in Windows 7, from the Windows Mail client that was on Windows Vista, you may want to transfer over your previously entered email account setup details that you had been using...  more »

Here's how you can find the text of a particular TextBox witnin an ASP.NET GridView row and then Select and Copy the text to Clipboard with Javascript. First put the following javascript in the HTML of your page (either in HEAD of your html page or...  more »