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
Great blog I hope we can work to build a better health care system as we are in a major crisis and health insurance is a major aspect to many.
- individual family on 'Wufoo: UI That Really Cares'.
- haiming webhosting reviews on 'Flash Goes Open Screen'.
- haiming webhosting reviews on 'Pulling Your Flickr Feed with jQuery'.
Subscribe to Comments RSS