Ask HN: How to fix overwide pre text?

22 points by pg 17 years ago

You may have noticed that long, verbatim text in a comment screws up the page width. I fixed this once, but the fix apparently stopped working in the latest versions of Firefox.

http://news.ycombinator.com/item?id=591894

People have suggested various new fixes that "should" work. I tried a few, and none did.

What is the simplest, most localized solution? (Before making suggestions, please test them by modifying an actual hn page and verifying that the problem is fixed.)

teej 17 years ago

Right now, your css reads as follows:

    pre {
      overflow:hidden;
      padding:2px;
    }

Changing it to the following works for me in both Firefox and Safari:

    pre {
      overflow:auto;
      padding:2px;
      max-width:500px
    }

pg 17 years ago

Thanks, that is exactly what I was looking for. I put it in http://ycombinator.com/news.css and it seems to work.

Caged 17 years ago

Given you've already fixed it with max-width I can't test this, but CSS 3 can also help out. The benefit of this approach is that the container can remain liquid:

    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+ */

You can read about this approach here: http://users.tkk.fi/tkarvine/pre-wrap-css3-mozilla-opera-ie....

audionerd 17 years ago

That's a good solution for a certain case: when you want a long line of text to break to a new line upon reaching the edge of its container.
But, for code samples, line breaks are significant to the understanding/execution of the code, and need to be preserved. A scrollbar is often better in these cases.

mrduncan 17 years ago

The following seems to take care of the issue in Firefox at least, I haven't had a chance to check in other browsers.

    pre {
        max-width:500px;
        overflow-x:scroll;
        padding:2px;
    }

Jakob 17 years ago

overflow: auto fixes this browser-wide. Check different overflow parameters here: http://www.quirksmode.org/css/overflow.html
Don’t use "scroll" as it always shows the scrollbar.

noodle 17 years ago

   pre{ display: block; width: 95%; overflow: scroll; }

works for me

Jem 17 years ago

display: block; isn't needed, pre is a block level element :)
- noodle 17 years ago
  
  what can i say, it wasn't working quite right for me without it.
  
  RossM 17 years ago
  
  The pre might have had its styles reset, and then been placed inside a block-level element that hadn't been reset.