CSS for code: Wrap long lines
Mark Ghosh 
Thanks for visiting! We would like to serve you better. Please subscribe to our RSS feed for daily updates. This blog posts regular Wordpress news, updates of themes, plugins, ideas, hacks, quick fixes and everything about blogging, especially about Wordpress. You can also receive updates from this blog via email if you want that method of notification.
If you post code on your Wordpress blog, you could use a code beautifier plugin such as syntax highlighter or you could include your code in <pre> tags. They preserve line breaks, multiple blanks, tabs between words and other formatting commonly used in code. However, in some cases, if body of your blog is narrow(er) or your line of code is really long, it will not wrap and will overflow over your sidebar. You can just hide the overflow but that still will look tacky and not very usable. On performing a little search, I discovered that Tyler Longren had already come up with a clever hack to solve the problem. If you add the following code to your stylesheet, it will wrap the long lines of code.
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+ */ }
(5 votes, average: 4.8 out of 5)
Loading ...
Comments RSS
Powered by 
Designed by 
Wow. This is very helpful. I didn’t know Mozilla has a property for word wrapping. Thanks!
[Reply] Dino Latoga (1 comments.) — 06/17/2007 @ 12:33 amvalid CSS ?
[Reply] Myo Kyaw Htun (8 comments.) — 06/17/2007 @ 2:54 am[...] went to Weblogtoolscollection (this is ping to their most resent article) and we wrote news article. Then we got BAN-ed and our [...]
First BAN for Mu « Word&Press Mu — 06/17/2007 @ 4:23 amnice hack!
[Reply] LcF (19 comments.) — 06/17/2007 @ 4:48 aminteresting. i’ve always just applied a fixed width to
[Reply] adam (39 comments.) — 06/17/2007 @ 9:10 ampre, and then usedoverflow: auto;so that it scrolls and makes the code available, without overpowering the layout.There’s a must more efficient way to present code: make sure lines don’t wrap, and give your code container an overflow property so that horizontal scrollbar gets in if needed. A line wrapping may be confusing when copying code.
[Reply] Ozh (74 comments.) — 06/17/2007 @ 9:20 am[...] CSS for code: Wrap long lines [...]
Around the web | alexking.org — 06/17/2007 @ 3:33 pmpre { overflow:auto; }
[Reply] anieto2k (2 comments.) — 06/17/2007 @ 5:15 pmThe overflow works too, although some people don’t want the scrollbar. I do agree that I’d rather have the scrollbar when viewing code though because line-wrapping can get a little messy with long lines of code.
[Reply] Ronald Huereca (39 comments.) — 06/17/2007 @ 6:09 pmVery handy! Thanks for pointing that one out, I’ve had problems with cross-browser overflows before and wrote off ever finding a soultion to it
[Reply] Keith (1 comments.) — 06/17/2007 @ 8:15 pm[...] Weblog Tools Collection » Blog Archive » CSS for code: Wrap long lines (tags: css code wrap) [...]
links for 2007-06-18 | Patrick Kempf — 06/17/2007 @ 8:43 pmNice tip.
Overall, I think I prefer the scrollbars, but that’s a personal preference. It’s nice to know the option is out there.
As for the commenter who said “make sure the lines don’t scroll”: How do you propose to do that? Considering people can resize the font, you can’t guarantee that unless you make the text and image.
[Reply] Stephen Rider (10 comments.) — 06/19/2007 @ 12:21 pmVery useful, thanks a lot!!!
[Reply] Shaun — 05/17/2008 @ 7:04 pm