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 »

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 »

This virus has been hitting systems for years, and has been resurging lately. Two computers in my household were infected within the same week, by different web sites. The virus may be getting around by an infected advertisement. Web owners accept the ad,...  more »

For the longest time, I've had a problem of not being able to see all the folders in my Pictures folder when using the Browse button on websites to upload a picture (or file) in Internet Explorer 11 (or in IE10). For whatever reason, some of the folders...  more »

Deleting unwanted apps from iTunes is fairly simple. If you want to delete an app that is in iTunes, which has been downloaded to your iPhone (or iPod Touch), follow these steps: Open iTunes, and on the left sidebar, click on Apps. Find the App you would...  more »

At some point, you may need to disable Microsoft Security Essentials (MSE) in order to install other software. To disable MSE follow these steps: Open Microsoft Security Essentials Click on the Settings tab. In the left-hand menu, select Real-time...  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 »

To change directories while in the windows command prompt use "cd" (cd stands for change directory in DOS)To go to a specific directory type the full path, such as: cd c:\ or cd c:\program files\ To go up one level type: cd ..To see what's in the current...  more »

Here's one way to setup your connection string for a SQL Server 2008 Express database for a live website using ASP.NET on Windows Server 2008. Open "Sql Server Configuration Manager" -> the click on "SQL Server Network Configuration" -> then click...  more »

Often times when using formula's in Excel, you want to keep just the text values that a formula outputs while deleting the actual formula from the cells. To keep a value in a cell while removing the formula that produced the value try the following: Type...  more »

Here's a quick SQL tip on how to get records beginning with numbers only. Use the query string LIKE '[0-9]%' For example: SELECT u.UserId, u.UserName FROM dbo.aspnet_Users u WHERE u.UserName LIKE '[0-9]%' ORDER BY u.UserName Keep in mind, If you are using...  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 »