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


In the following step by step, I will take you through the process of deleting existing hard drive partitions, formating and installing Windows XP on a hard drive using the Windows XP installation CD. Note: If you have any data/applications or drivers on...  more »

Not sure what to do with your old Dell computer equipment? If you have Dell computer equipment lying around that no longer works or you don't use, why not recycle it for free at Staples. Here's the details on how to recycle Dell computer equipment at...  more »

Prevent QuickTime from loading in your startup menu when Windows boots up.  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 »

By using iTunes, you are able to backup your settings, applications and personal data from an iPhone, iPad, or iPod Touch. You'll definitely want to backup your iPhone if you are upgrading to a newer iPhone model (or plan to sell your iPhone) so can...  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 »

Windows Vista comes with a little known tool called the "Snipping Tool" that allows you to take screenshots of your computer screen. The Snipping Tool has the ability to take 4 different types of screenshots. You can choose from Free-form Snip,...  more »

I recently discovered an issue after I upgraded to TinyMCE 4.1.3 version text editor in my ASP.NET web pages that was causing the formatting of my <pre> tags to not keep its line break formating on PostBack. At first I thought this might be a CSS...  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 »

How to implement a StopWords filter in C# that will filter out certain woulds from a query.  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 »

If you like having the Printers selection button on the Vista Start menu, you can easily add it to the menu. Follow these steps to add the Printers button to the Vista Start menu: Right click on an empty area on the Taskbar and then select Properties....  more »