Close and Go BackBack to Viget

Linewrapping With PRE

Doug Avery
Doug Avery, ON THE TOPIC OF CSS
Mar17 2

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.

Jason Garber said on 03/17 at 04:55 PM

Nice find, Doug! Preformatted text has always been a pain to deal with, so this helps out quite a bit.

Stephanie Hay said on 03/24 at 10:05 AM

Very cool.

We're The Designers

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

Know Someone?

Viget's hiring a Senior Ruby on Rails (RoR) Developer. Find out more »

Recent Comments

Hi Doug!

I just want to print this article :) But the print version is yet to be fully polished. I hope you guys spend sometime :) Viget inspire is a really nice resource for me....

Subscribe to Comments RSS RSS

Contact Us

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


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.