Word Wrap with a pre tag

by Oscar Sodani

November 3, 2008

Oscar Sodani is a founder of Help2Go and owner of Help2Go Networks, an IT consulting firm in the Washington D.C. area. Oscar holds the CISSP certification as well as industry certifications from Microsoft, Cisco and Novell.

Every browser uses a different method to word wrap text. This can be especially frustrating when you are displaying text with a pre tag. After much research I found a css snippet that will do the job in all browsers.

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 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Thank you to T. Longren for posting this information on the Unwakeable Blog.

Have a question? Need help? Get free, friendly person-to-person help with your computer questions or spyware questions in our help forums!

[ Back ]
More Tutorials
More Web Page Design