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


UPDATE 12-16-2011: For those of you who are getting an "sgen.exe" error message when trying to building your project in Visual Studio that reads something like "Could not load file or assembly or one of its dependencies. Operation is not supported. SGEN"....  more »

It's not the most intuitive process to add an Apple Store Gift Card to the Wallet app on your iPhone. Apple Store gift cards seem to be considered Apple Passes, not Apple Pay/ Credit cards. Fortunately, there is a way to do it that's not too complicated...  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 »

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

Find out how to quickly and easily rename a group of files or folders at once.  more »

ISO files contain the image of a disc, which is essentially an exact copy of the low level data actually stored on a disc. Typically, ISO image files have a file extension of .iso. When burning an ISO file to CD or DVD, you'll want to just make sure that...  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 do any sort of ASP.NET programming there usually comes a time when you need to get a websites Base URL. The following shows two examples, the first example shows how to get the Base Site Url using C#, which can be used for getting both the...  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 »

Learn how to manually initiate the transferring of pictures to your computer with Kodak's EasyShare software.  more »

Here's how you can quickly remove multiple Blank cells in Excel: 1) Select the area of cells or columns you want to have blank cell spaces removed. 2) Then press "Ctrl" + "G" on your keyboard.. this will pop-up the Go To box. 3) Now press "Alt" + "S" on...  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 »