Могу ли я настроить ширину a <pre class="prettyprint-override"> area to fit the text?

У меня есть следующее:

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

и

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

Когда текст отображает фон <pre>, идет полная ширина страницы. У меня есть демо:

fiddle

Я хочу, чтобы красный фон останавливался сразу после самого правого символа моего кода. Я не хочу видеть большую красную область, которая простирается с одной стороны страницы на другую.

Может ли кто-нибудь сказать мне, можно ли это сделать с помощью CSS. Я действительно не уверен, потому что не могу думать, что я могу сделать.

Спасибо

Ответ 1

Вы можете использовать display: inline-block;:

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

Хотя, пожалуйста, проверьте поддержку браузера, потому что это не удивит меня, если IE не поддерживает его.

Ответ 2

Для этого вы можете использовать float:left и очистку div.

http://jsfiddle.net/hLVV9/2/

Ответ 3

Для этого поведения вам нужно float ваш <pre>. Плавающие блоки, конечно, вызывают некоторые изменения компоновки, поэтому вам нужно обернуть их в другой элемент блока очистки:

<div class="pre-wrapper"><pre>Lorem ipsum</pre></div>

.pre-wrapper {
    overflow: hidden;
}

.pre-wrapper pre {
    float: left;
}

Ответ 4

Добавление display: inline-block должно делать это для FF, Safari и Chrome. Но не забудьте проверить все браузеры и как они себя ведут, особенно IE