Linewrapping With PRE
While working to make these blogs as flexible as we could for fancy stuff like images, blockquotes, and etc, we ran up across an issue (especially on Viget Extend): long lines of code don't play so nice with our relatively narrow columns. Turns out the pre tag (of course) preserves all spacing and linebreaks, and by nature has difficulty wrapping nicely.
All is well, however, since I stumbled across this little hack:
pre {
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+ */
}
It's a little clunky (maybe more than a little), but it gets the code inside pre tags breaking nicely.
Nice find, Doug! Preformatted text has always been a pain to deal with, so this helps out quite a bit.
Very cool.
Next entry: Yahoo Maps Creates Generous and Powerful API for AS3
Previous entry: Thoughts on the ExpressionEngine 2.0 Sneak Peek

Recent Comments
Keith, what do you think the relative merits of jQuery are in comparison to mootools?
- Web Designer Glasgow on 'Pulling Your Flickr Feed with jQuery'.
- Prabhdeep singh on 'Fun With jQuery's Animate() Function'.
- haiming webhosting reviews on 'Pulling Your Flickr Feed with jQuery'.
Subscribe to Comments RSS