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


So if you're like me, you may be happy with Windows 7 (or 8.1) on your current computer or laptop, and have no interest in upgrading to Windows 10. But you may also be getting bombarded by Microsoft to upgrade to Windows 10, with the Windows 10 upgrade...  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 »

The Windows Live Messenger sign box will by popup by default on computer startup. This can be quite annoying especially if you don't even use the Windows Live instant messenger client. Luckily, you can easily turn off the Windows Live Messenger popup box...  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 »

If you want to have two seperate Microsoft Excel files open that are separate from each other, that don't load within the same instance of Excel, then keeping reading to find out how to get around this limitation.  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 »

ISO files contain the image of a disc, which is essentially an exact copy of the low level data actually stored on a disc. Typically, ISO image files have a file extension of .iso. When burning an ISO file to CD or DVD, you'll want to just make sure that...  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 »

To display line numbers in a Visual Studio.net 2008 code window do the following: Open Visual Studio.net On the Menu bar, Select 'Tools' -> 'Options' In the Options pop-up window, Select 'Text Editor' -> 'All Languages' > 'General'. Note: If you...  more »

Windows Live Messenger can be pretty annoying if you have it installed on your computer, but don't actually use it. Messenger will by default load during start-up of Windows, and also pop-up when opening Internet Explorer or using the Bing search bar,...  more »

Learn how to get the latest security updates and service packs for your Microsoft Windows computer.  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 »