Home » Featured | Technical

How to wrap text inside PRE tags in all browsers

29 Sep 2008 by Serge B. 0 Comments

While looking for line-wrapping solution for syntax highlighted code blocks on the new vbCity community web site and had (once again) to search for the right <pre> tag CSS attributes that'd wrap code in all browsers. So, I ran at this great post that summarizes it all nicely and in one post:

Wrapping Text Inside Pre Tags - http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/

Be sure to scroll down to the end of the article as Tyler keeps updating it with new attributes.

Her is the latest style I use on this site that I found in Tyler's post:

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+ */
}

 

Bookmark and Share

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Comments

Comments are closed