3 ms·

To be fair, this is really a problem which should be fixed server-side. Happens all the time and it's really annoying. Long strings in a "code" box should eith

• drawkbox 18y ago
  overflow:hidden or overflow:scroll on the element or containing div would fix it.
  • rms 18y ago
    It's there, it stopped working in Firefox 3.
    • pg 18y ago
      If anyone can tell me what to put in the html to fix the problem, I'd gladly do it. Why did this stop working in Firefox 3?
      • ars 18y ago
        You can put white-space: pre-wrap; in the css for the pre tag. You can also add overflow: auto; instead of hidden, but you'll need to add width tags going all the way up to the width="85%". Note: I tried mucking with the HTML and adding the widths, but can't quite get it to work. But overflow does not work without a defined width, and width does not work unless the parent has a width. You might need to add: html, body { width: 100%; } Relative widths with overflow are annoying to get right.
      • fizx 18y ago
        The simplest thing would be to insert WBR tags every so often. Could be a small performance hit, so I'd do it on write. In Ruby, this would be: content.gsub(/\S{40}/, '\0<wbr>')
      • jcl 18y ago
        Xichekolas' Greasemonkey script fixes it for me in Firefox. Maybe you could include the cross-browser equivalent of his Javascript snippet? (http://userscripts.org/scripts/review/25039 http://userscripts.org/scripts/review/25039)
        • Xichekolas 18y ago
          Since the code in my GM script has become a bit ugly, here is the relevant portion (cleaned up and commented): // Get all the pre tags within comments. var xpathpres = document.evaluate("//span[@class='comment']//pre", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); // Iterate through them. for (var n = 0; n < xpathpres.snapshotLength; n++) { var thispre = xpathpres.snapshotItem(n); // Find width of the spacer image, add 120 (found experimentally). var reduction = (thispre.parentNode.parentNode.parentNode.firstChild.firstChild.width || 0) + 120; // pre span td tr td img // Get the size of the browser window, default to 800px. var winsize = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 800; // Ensure a minimum width so things don't disappear. var width = Math.max(winsize - reduction, 300); // Set the width. thispre.style.maxWidth = width + 'px'; } Really seems like there should be a pure CSS solution to this though. As others have pointed out, setting overflow-x: scroll and then defining widths for all the containing elements explicitly would probably fix it without depending on javascript. If he were to use my solution, at least he would know the spacer image width serverside, so wouldn't need javascript to find that. Would still have to use it to find the window size though.
    • drawkbox 18y ago
      Change the comment span to a div and add an style="overflow:scroll;" or add it to the .comment style. overflow:scroll doesn't work well on spans. Or put a div inside the comment span containing the comment content with the same attribute, overflow:scroll then it will have a horizontal scroll on that item not the page. However this might want to be tested as you may need some min and max settings so that long vertical comments don't scroll. Probably not a quick fix the way things are setup.
      • ars 18y ago
        You will also need to add width tags climbing up the tree to make overflow work. Width: 100% on the tables, tr, and td's (possibly not all of them, I didn't test it fully.) (And you can't put pre in a span, so change the span to a div like drawkbox said.) But use overflow: auto not overflow: scroll. And if you are worried about vertical scroll use x-overflow: auto (doesn't work in opera though).