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


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 »

Today I got a new laptop battery for my Dell Inspiron laptop. The old battery that came with the laptop was completely dead, so I wanted to find out if there was an easy way to recycle the old battery instead of throwing it way. Ever since watching...  more »

UPDATE 12-16-2011: If you are using ASP.NET and your website / database is live, and you want to take the database offline, you're better off putting an App_Offline.htm file in your website main directory to first take the website down for maintance (I...  more »

Windows Live Messenger can be pretty annoying if you have it installed on your computer, but don't actually use it. Messenger will by default load during start-up of Windows, and also pop-up when opening Internet Explorer or using the Bing search bar,...  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 »

One of these useful features is the pivot table function. You can find it in all spreadsheet applications. The present guide shows how to create a pivot table in the Calc application of LibreOffice, which is the Ubuntu Linux version of Calc in...  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 »

I recently ran into the following error while trying to get Elmah to work / complie with my Web Application Project in Visual Studio 2010: Could not load file or assembly 'file:///C:\Users\DOUGDELL2\Documents\Visual Studio...  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 »

Zipping a file or folder up can be a great way to compress the file in order to make the file size smaller and easier to manage. It can be especially useful when you want to send a large file to someone via email, since most email hosts limit the file...  more »

The ScanDisk utility that was in previous versions of Windows is no longer available in Windows XP. Not to worry because you can now use the Error-Checking tool to check the integrity of your hard disk.  more »

The new Routing features in ASP.NET 4.0 are pretty awesome. However, one issue I ran into recently was trying to get the fully qualified urls from Page.GetRouteUrl as string urls to be used in emails messages. Unfortunately, I wanted something that worked...  more »