

Ask HN: How to fix overwide pre text? - pg

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.<p>http://news.ycombinator.com/item?id=591894<p>People have suggested various new fixes that "should" work.  I tried a few, and none did.<p>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
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
Thanks, that is exactly what I was looking for. I put it in
<http://ycombinator.com/news.css> and it seems to work.

------
Caged
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....](http://users.tkk.fi/tkarvine/pre-wrap-css3-mozilla-
opera-ie.html)

~~~
audionerd
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
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
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

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

works for me

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

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

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

