post-page

CSS for code: Wrap long lines

15
responses
by
 
on
June 16th, 2007
in
Code, HOW-TO, WordPress
heading
heading
heading
15
Responses

 

Comments

  1. Dino Latoga (1 comments.) says:

    Wow. This is very helpful. I didn’t know Mozilla has a property for word wrapping. Thanks!

  2. Myo Kyaw Htun (8 comments.) says:

    valid CSS ?

  3. LcF (19 comments.) says:

    nice hack!

  4. adam (39 comments.) says:

    interesting. i’ve always just applied a fixed width to pre, and then used overflow: auto; so that it scrolls and makes the code available, without overpowering the layout.

    • Tito (1 comments.) says:

      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.

  5. Ozh (88 comments.) says:

    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.

  6. anieto2k (2 comments.) says:

    pre { overflow:auto; }

  7. Ronald Huereca (39 comments.) says:

    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.

  8. Keith (1 comments.) says:

    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

  9. Stephen Rider (10 comments.) says:

    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.

  10. Shaun says:

    Very useful, thanks a lot!!!



Trackbacks/Pingbacks

  1. […] went to Weblogtoolscollection (this is ping to their most resent article) and we wrote news article. Then we got BAN-ed and our […]

  2. […] CSS for code: Wrap long lines […]

  3. […] Weblog Tools Collection » Blog Archive » CSS for code: Wrap long lines (tags: css code wrap) […]

Obviously Powered by WordPress. © 2003-2013

page counter
css.php