Webmaster Forum / HTML, CSS, Scripts / CSS / June 2008

Since most monospace fonts are the same actual width for any given nominal
size, set a width or min-width on the pre block that matches the width the
content requires. That way when the window is wider than it needs to be, the
background and border of the block will be a close fit too instead of being
wider than the content requires.

No not really. You are giving conflicting rules. PRE in in monospace
font and preserves the whitespace and text newlines to the length of the
 PRE text is fixed but the viewport may change...

3 options that I see, adjust the overflow property

pre.example {
  padding: 3px 5px; border: 3px double silver;
  background: #eee; overflow: auto;
  /* causes a scrollbar if content does not fit */
}

pre.example {
  padding: 3px 5px; border: 3px double silver;
  background: #eee; overflow: hidden;
  /* causes content to be clipped */
}

pre.example {
  padding: 3px 5px; border: 3px double silver;
  background: #eee; width: 20em;
  /*
  set width to static maximum line width
  which is far from elegant and will probably
  cause other problems...
  */
}

You can make the <pre> shrink-to-fit (or grow-to-fit), by for example

   pre { float: left; min-width: 100% }

working around unwanted side-effects as necessary, perhaps with:

   pre:after
   {
       content: "";
       display: block;
       clear: left;
   }

(might not work in IE).

g3nut5$ulq$1@newsserv.zdv.uni-tuebingen.de

You could set display:table; for pre, and since IE does not do
display:table; you could use a conditional comment for IE and set
display:inline; zoom:1;

 <style type="text/css">
   pre {
     display: table;
   }
 </style>
 <!--[if IE]>
   <style type="text/css">
     pre {
       display: inline;
       zoom: 1;
     }
   </style>
 <![endif]-->