Okay… I can add the following to the style sheet and it more or less prevents the problem in my IE 5.5/Win browser:
pre {width: 725px; overflow: hidden}
When a long line of code renders longer than 725 pixels, the excess is hidden and doesn’t cause the table cell to widen. The cool thing is that even though the excess is hidden, you can still select and Copy the entire line for Pasting into your templates or whatever.
The downside is that it’s optimized for a screen that is 1024 pixels wide. If you want it to adapt to different screen widths, the following javascript placed in the <head> works…
<script language="JavaScript">
<!--
var w = screen.availWidth - 300 ; // Leave space for the margins and left column.
document.writeln('<style type=\"text\/css\">');
document.writeln('<\!--');
document.writeln('pre {width: ' + w + 'px; overflow: hidden}');
document.writeln('--\>');
document.writeln('<\/style>');
//-->
</script>
I know there must be a simpler way to use javascript (DHTML) to set the width and overflow values of the <pre> tag directly. I thought the following would work but it didn’t:
<script language="JavaScript">
<!--
var w = screen.availWidth - 300 ;
document.tags.pre.width = w ;
document.tags.pre.overflow = "hidden" ;
//-->
</script>
I got an error message that the tags object was undefined. Anyone know the right object references to do the job?
