Ask HN: How to fix overwide pre text? | Hacker News Reader

Ask HN: How to fix overwide pre text?

22 pointspg10 comments

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.)

View on HN

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
    }

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

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....

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.

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;
    }

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.

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

works for me

display: block; isn't needed, pre is a block level element :)

what can i say, it wasn't working quite right for me without it.

The pre might have had its styles reset, and then been placed inside a block-level element that hadn't been reset.

Reply on news.ycombinator.com