Linewrapping With PRE

Doug Avery, Former Senior Developer

Article Category: #Design & Content

Posted on

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.

Related Articles