我可以调整区域的宽度以适合文本吗？

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.

有人能告诉我是否可以用CSS做到这一点。我真的不确定，因为我无法想象我能做些什么。

Thanks

谢谢

5 个解决方案

#1

You can use display: inline-block;:

你可以使用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.

虽然请查看浏览器支持，因为如果IE不支持它，我不会感到惊讶。

#2

The best solution so far :

迄今为止最好的解决方案：

pre {
    white-space: pre-wrap;
}

#3

You can use float:left and a clearing div to achieve this.

您可以使用float：left和一个清除div来实现此目的。

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

#4

For that behavior you will need to float your <pre>. Floated blocks of course cause some layout changes, so you need to wrap it in another clearing block element:

对于该行为，您需要浮动

。浮动块当然会导致一些布局更改，因此您需要将其包装在另一个清除块元素中：

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

.pre-wrapper {
    overflow: hidden;
}

.pre-wrapper pre {
    float: left;
}

#5

Adding display: inline-block should do it for FF, Safari and Chrome. But make sure to check in all browsers and how it behaves, specially IE

添加显示：内联块应该用于FF，Safari和Chrome。但请确保检查所有浏览器及其行为，特别是IE

#1