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: 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 »

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 »

In SQL Server 2008 Management Studio, you may want to change the default settings to allow you to edit more than the 200 rows at a time, or select more than 1000 rows, which are the default settings for SQL Server. To modify "Edit Top 200 Rows" or "Select...  more »

There's a good chance that if you're database driven application is running into the following sql error message that says "String or binary data would be truncated", that the error is being caused by an issue in a SQL statement or in the SQL code of a...  more »

I recently installed SQL Server 2008 database on my local computer and forgot to enable the common language runtime (CLR). Because I had forgotten to turn it on, some portions of my sites were not fuctioning properly due SQL Server not being able to...  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 »

This step-by-step goes through the process of importing delimited text files into a SQL Server 2005 database. The example should help you better understand how to import different types of flat files into SQL Server 2005.  more »

At some point you may need or want to test your computers memory ram to make sure it is work correctly. In Windows 7, you can easily test your memory or RAM using the built in Windows Memory Diagnostic Tool. To do this in Windows 7 follow these steps: In...  more »

Wordpress is a blogging application that provides basic content management to those who manage their own website blogs. It is free and available for download at Wordpress.org and is the most commonly used program for bloggers. A blog is essentially a...  more »

The following is a step-by-step example of how you can easily import delimited text files into Microsoft Excel. You can use the Excel Text Import Wizard to quickly import files delimited by Tab, Semicolon, Comma (also known as Comma Separated Value (CSV) file format), Space or Other (you choose), or divided by fixed width columns.  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 »