Can I adjust the width of a <pre> area to fit the text?

Question

I have the following:

<p>This is a test</p> <pre>public class Car {     protected Car() { }     protected Car(int speed) { }     protected void Car() { } }</pre> <p>Another line</p> 

and

pre {     font-family: monaco,consolas,"courier new",monospace;     font-size: 1em;     min-height: 3em;     overflow: auto;     padding: 1em;     xwidth: 80%;     background-color: red; } 

When the text displays the <pre> background goes the full width of the page. I have a demo here:

fiddle

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.

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.

Thanks

Answer 1

You can use display: inline-block;:

http://jsfiddle.net/hLVV9/1/

Although please check out the browser support, because it wouldn't surprise me if IE doesn't support it.

Answer 2

The best solution so far :

pre {     white-space: pre-wrap; }