Ask HN: How to fix overwide pre text?

https://news.ycombinator.com/item?id=592515

by pg • 17 years ago

22 10 17 years ago

news.ycombinator.com

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

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.

noodle2• 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 :)

noodle2• 17 years ago

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

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.

Ask HN: How to fix overwide pre text?

Related Stories