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 either be broken up programatically (spaces inserted slashdot-style?) or put in a div with a scrollbar.

overflow:hidden or overflow:scroll on the element or containing div would fix it.

It's there, it stopped working in Firefox 3.

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?

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.

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

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)

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.

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.

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