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


Turn on Automatic Updates in Windows XP so that new security updates from Microsoft will be automatically downloaded and installed on your computer. By enabling Automatic Updates you will help make your computer safer from internet security threats and viruses.  more »

When developing websites or applications in Visual Studio.NET, you sometimes need to have Visual Studio run as an administrator. For instance, if you are developing a Web Application Project that uses IIS7 as the local development server for testing,...  more »

Ever since moving to a Windows 7 (64 bit) computer, I haven't been able to view Photoshop thumbnail previews of .psd files in Windows Explorer. However, today I decided to find a solution to this anonying problem, so that I could start seeing previews of...  more »

If you've recently moved a Visual Studio.net web site project (wsp) or web application project(wap) to deploy on Internet Information Services 7 (IIS7) you may have discovered that your Tiny_MCE text editor no longer is showing up and getting the pop-up...  more »

Are you backing up your SQL Server 2008 databases daily? You should be, especially if you don't want to lose any of your precious data that you're storing. It's incredibly easy to setup a maintenance plan in SQL Server 2008 to automatically back up one or...  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 are sick of getting the Error Reporting window popping up all the time, then you’ll be happy to know that error reporting can be easily turned off in Windows XP by following these simple steps.  more »

Here's one quick fix for the ASP.NET error System.FormatException: Input string was not in a correct format. when you are using a DataList with an asp:Button control and are trying to get the CommandArgument using the DataList_RowCommand. Keep in mind...  more »

There may be a time when you want to use special characters in a Word document or other text file. With Windows Vista and Windows 7 you can quickly bring up a Character Map, which allows you to copy special characters or symbols, which can then be pasted...  more »

The AjaxFileUpload control that's part of the AJAX Control Toolkit, works great for easily uploading multiple files at once. However, it gets a little tricky if you want to update an UpdatePanel after all the files have finished uploading, especially if...  more »

MySQL has several ways to create backups of important data. In this article, I will show you how to create a backup of your MySQL database on a Windows machine using the MYSQLDUMP utility that is included with MySQL.  more »

Facebook users often don’t think about, or even realize for that matter, how their privacy settings are currently set. You simply assume that only your friends can read your wall posts, see your photos, or get your work, email, or phone information....  more »