[…] went to Weblogtoolscollection (this is ping to their most resent article) and we wrote news article. Then we got BAN-ed and our […]
[…] CSS for code: Wrap long lines […]
[…] Weblog Tools Collection » Blog Archive » CSS for code: Wrap long lines (tags: css code wrap) […]
[…] Source […]
Wow. This is very helpful. I didn’t know Mozilla has a property for word wrapping. Thanks!
valid CSS ?
nice hack!
interesting. i’ve always just applied a fixed width to
pre
, and then usedoverflow: auto;
so that it scrolls and makes the code available, without overpowering the layout.That’s what I do and prefer to do when I’m using pre tags to post code on my blogs (could be css, html, php or perl code) . In my opinion it presents the code in a more readable format.
I can however see a use for the css Mark posted. Especially when including larger snippets of text in a post and you don’t want to waste too much time styling it.
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.
pre { overflow:auto; }
The 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.
Very 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
Nice 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.
Very useful, thanks a lot!!!