tags:

views:

1690

answers:

3

pre tags are super-useful for code blocks and for debugging output when writing scripts, but how do I make the text word-wrap instead of running one long line?

+11  A: 

the answer, from this page

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+ */
}
adambox
On a side note, most people google prefer to google a few seconds before asking, not after.
ZCHudson
Nothing wrong with answering your own question..
Kip
yeah. asking a question you already know the answer to is a great way to share knowledge. Plus, *this* is going on google (it's already 6th in the listings if you search for it), so it's a resource for future developers.
nickf
I asked and answered specifically to get the knowledge onto this (wonderful) site ;) :P
adambox
A: 

You can either:

pre { white-space: normal; }

to maintain the monospace font but add word-wrap, or:

pre { overflow: auto; }

which will allow a fixed size with horizontal scrolling for long lines.

Bobby Jack
+1  A: 

Try using

<pre style="white-space:normal;">.

Or better throw CSS.

Eduardo Campañó
this one seems to work in IE 7 but not 6. this is the only suggestion that seemed promising for IE... all other suggestions were good for other browsers...
towps
nevermind must have been a browser caching thing. restarted IE 6 and all is well. cheers.
towps