Close and Go BackBack to Viget

Linewrapping With PRE

Doug Avery
Doug Avery , ON THE TOPIC OF CSS
3/17
2008

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.

blog comments powered by Disqus

We're The Designers

at Viget Labs. We write about design news, trends, techniques, buildout, inspiration, CSS, and our projects.

What's a-twitter?

Follow us @VigetInspire for updates of the goings-on here or @Viget for more from all of the Viget crew. #thatisall

Contact Us

Have any questions, comments, ideas, or secrets to share? Let us know.


How many days in a non-leap year?

Sorry, you need to have Javascript enabled to use this form. (Don't blame us, blame the spammers!) If you'd like to contact us, please visit our Contact page.