header

Torsten Curdt’s weblog

Wrapping pre-formatted text

I haven’t notitced that the long lines of my code blocks weren’t wrapping properly in firefox. In Safari everything was just fine. Adding these few lines to the css stylesheet should do the trick.


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

Glad I found that on this website.

  • Hello

    I was struggling with such preformatted text bleeding off my DIVs and found this advice.
    I visited the site mentioned at the top of this page "Gald I found this site" which clarified things a little more.
    I added the 'pre' code in my existing style sheet and... it works perfectly.

    Thank you so much for covering this subject.
    Now I'd like to thanks the people on the other site because the provided the code!

    Good luck and thank you to the people who are trying to break the limitations of code in web designing.

    Daniel
  • Chris
    Why do you people keep specifying the pre style? You have the same problem for any other tag that has a long string of unbroken text. Pre only preserves whitespace, which most people don't care about anyways. All we're looking for is a way to make divs in FF wrap ridiculously long strings, which the above code will never do until FF supports word-wrap.
  • Ken
    Under OSX Panther 10.3.9:
    Works fine in Firefox 1.5.0.9 , Opera 9.02 and Camino 1.0.3, but has no effect in Safari 1.3.2
  • Lee
    Wow, this is an old discussion but none the less I have been experiencing strange behavior from Safari when I use word-wrap: break-word; on pre elements. I find that it divides words based on the div width but without caring if if the word is chopped in half.

    Any Ideas?
  • dkt
    It doesn't works in IE 6, any suggestions?
  • Just FYI, the 'word-wrap: break-word;' also makes this work in Safari 2.0.4.
  • Harrison
    Hmm. "word-wrap:break-word" doesn't seem to work in IE 7.0 beta2. Any suggestions?
blog comments powered by Disqus