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


A regular expression for validating a image url.  more »

If you’re running your own dedicated Windows server, then you may need to know how to setup FTP Sites in Windows Server 2003. In this how-to article I will go through the basics of setting up a windows FTP user account, and an FTP Site, which will allow a user to connect to a website using an FTP program.  more »

This article shows the way of converting a movie DVD to Kindle Fire tablet. DVD to Kindle Fire Converter is a professional DVD to Kindle Fire converting tool to help you rip/convert DVD movie to H.264/MPEG-4 video which are compatible with Kindle Fire....  more »

By default, the Quick Launch bar is not enabled on the Taskbar in Windows 7, as it was in Vista and XP. Instead, you're able to drag and pin programs to the Taskbar in Windows 7 for quick access to programs. However, if you want to bring back the Quick...  more »

What is Impress? Impress is a presentation software that is delivered with the free OpenOffice suite of programs. It can be downloaded free of charge, and can open presentations created in PowerPoint. Apart from Impress format, you can save your...  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 »

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 »

The Windows Task Manager can be used to start programs, to end running applications, to start or to end processes, as well as to view a dynamic display of your computer's performance. To be able to start the Windows Task Manager, you can use any one of...  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 »

In this quick tip, you'll learn how to open the Windows Explorer in Windows 7. Move your mouse cursor over the windows Start button and right-click. In the menu that pops up, click on Open Windows Explorer. The Windows Explorer window should open up, and...  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 »

Find out how-to take a snapshot of what’s on your computer screen and turn the screenshot into an image using graphic software. You'll learn how to take a screenshot of your entire computer screen or just a selected window.  more »