3 ms·
Ask HN: How to fix overwide pre text?
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 18y agoThe 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 18y agooverflow: auto fixes this browser-wide. Check different overflow parameters here: http://www.quirksmode.org/css/overflow.html http://www.quirksmode.org/css/overflow.html Don’t use "scroll" as it always shows the scrollbar.
- noodle 18y agopre{ display: block; width: 95%; overflow: scroll; } works for me
- teej 18y agoRight 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 18y agoThanks, that is exactly what I was looking for. I put it in http://ycombinator.com/news.css http://ycombinator.com/news.css and it seems to work.
- Caged 18y agoGiven 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.html http://users.tkk.fi/tkarvine/pre-wrap-css3-mozilla-opera-ie....
- audionerd 18y agoThat'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.