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


I recently upgraded to Windows 7 Home Premium on my Dell Inspiron laptop. After using the laptop for a few days, I noticed that the screen display brightness was much dimmer than what it had been when Windows Vista was installed on the laptop. To solve my...  more »

Use a Laptop Cooler Cooling Pad to keep Laptop from Overheating in Hot Summer Temperatures  more »

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 »

Learn how to manually initiate the transferring of pictures to your computer with Kodak's EasyShare software.  more »

This computer tip will help you quickly increase or decrease the size of text on a web page or in an email message for better viewing using a mouse click wheel.  more »

Here's a couple quick SQL database tips for finding and deleting duplicate values in a SQL Server table.To find duplicates in a Column use the following SQL: SELECT ColName1, COUNT(*) TotalCountFROM TableName GROUP BY ColName1 HAVING (COUNT(ColName1) >...  more »

To create a border outline for a transparent rectangle or circle in Photoshop do the following: Select the "Rectangle Marquee Tool" (or use the "Circle Marquee Tool" for drawing an oval) and then draw an outline for the border area. Go to the "Edit" menu...  more »

If you've ever wanted to get Related Posts based on similar Tags from other Posts using SQL, the following SQL code should help with creating your own SQL query. In this example, the Related Posts are articles, but they could be Blog posts or any other...  more »

Here's a quick tip on how to get the Taskbar in Windows 7 to become visible while watching a flash video (YouTube, Vimeo, etc.) in full-screen mode. To get the taskbar to show while still in full-screen video mode, simply press the Windows (logo ÿ)...  more »

By switching on your iPhone 5's Personal Hotspot feature, you essentailly can turn your iPhone into a WiFi router that other devices can connect to the internet through. You can also establish a password protected network connection which can be shared...  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 »

This tutorial will teach you how to use the SUM function in Microsoft Excel to add column values together in order to calculate a total amount.  more »