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 03: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 09:05 AM

Very cool.

Name:

Email:

URL:

Remember my personal information

Notify me of follow-up comments?

We're The Designers

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

So Can You:

Viget's hiring a Senior Designer, a Front-End Developer, and Web Designers. Find out more »

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.

Subscribe to Comments RSS RSS