title: Can I adjust the width of a <pre> area to fit the text?
body: <p>I have the following:</p>
  
  <pre><code>&lt;p&gt;This is a test&lt;/p&gt;
  &lt;pre&gt;public class Car {
      protected Car() { }
      protected Car(int speed) { }
      protected void Car() { }
  }&lt;/pre&gt;
  &lt;p&gt;Another line&lt;/p&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>pre {
      font-family: monaco,consolas,"courier new",monospace;
      font-size: 1em;
      min-height: 3em;
      overflow: auto;
      padding: 1em;
      xwidth: 80%;
      background-color: red;
  }
  </code></pre>
  
  <p>When the text displays the <code>&lt;pre&gt;</code> background goes the full width of the page. I have a demo here:</p>
  
  <p><a href="http://jsfiddle.net/hLVV9/" rel="noreferrer">fiddle</a></p>
  
  <p>What I would like is for the red background to stop just after the far most right character of my code. I don't want to see a big red area that extends from one side of the page to another. </p>
  
  <p>Can someone tell me if it is possible to do this with CSS. I really am not sure as I cannot think what I can do. </p>
  
  <p>Thanks</p>