Saturday, December 2nd, 2006

Wrapping the pre tag

Category: CSS, Tip

Making preformated

 text wrap in CSS3, Mozilla, Opera and IE

is the tip that let’s you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn’t wrap:

  1. /* Browser specific (not valid) styles to make preformatted text wrap */
  2. pre {
  3.  white-space: pre-wrap;       /* css-3 */
  4.  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  5.  white-space: -pre-wrap;      /* Opera 4-6 */
  6.  white-space: -o-pre-wrap;    /* Opera 7 */
  7.  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  8. }

Posted by Dion Almaer at 9:16 am
9 Comments

+++--
3.9 rating from 64 votes

9 Comments »

Comments feed TrackBack URI

[…] 用 <pre></pre> 如果遇到文字過長的時候就會炸掉,結果剛剛在 Wrapping the pre tag 這篇看到解法: pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* 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+ */ } […]

Pingback by pre 裡的換行 at Gea-Suan Lin’s BLOG — December 2, 2006

Now I know for sure that you are subscribed to my del.icio.us feed. ;-)

Comment by Dean Edwards — December 2, 2006

Mise en forme du tag "pre"

J’ai eu besoin d’afficher des bouts de code source il y a quelques jours au moyen du tag …. Or sous Internet Explorer, les lignes trop longues débordent et mettent le bronx dans la structure de la page en décalant toute la…

Trackback by ludomaticpointfr — December 3, 2006

this doesnt seem to change the text for me… ?

Comment by n8Dog — December 3, 2006

[…] Wrapping the pre tag (tags: HTML webdesign css) […]

Pingback by links for 2006-12-04 at Blue Sky On Mars — December 4, 2006

yay, thing is, i can’t think of anything i can apply this to other than my blog, which i rarely post to anyway.

Comment by naterkane — December 5, 2006

[…] is the tip that let’s you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn’t wrap: /* Browser specific (not valid) styles to make preformatted text wrap */ pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* 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+ */ } via http://ajaxian.com/archives/wrapping-the-pre-tag […]

Pingback by wrapping <pre> at whack.perkis.com — December 5, 2006

There is problem with this that if the PRE tag is inside the table cell it will not work properly. Inorder for thaat to work you need to wrap it in UL >LI element
so you would have
TABLE > UL> LI> >PRE
Works in IE and FF haven’t check others.

Comment by Greg Bugaj — March 30, 2007

This css is not working for Mac OS safari browsers..It is a big annoying issue in safari. Do u have any solution for PRE wrap in safari browser?

Comment by bala — November 2, 2007

Leave a comment

You must be logged in to post a comment.