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.