Question

我有以下内容：

<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执行此操作。我真的不确定，因为我无法想象我能做些什么。

由于

Answer 1

您可以使用display: inline-block;：

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

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

Answer 2

目前为止的最佳解决方案：

pre {
    white-space: pre-wrap;
}

Answer 3

您可以使用float:left和结算div来实现此目标。

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

Answer 4

对于这种行为，您需要float <pre>。浮动块当然会导致一些布局更改，因此您需要将其包装在另一个清除块元素中：

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

.pre-wrapper {
    overflow: hidden;
}

.pre-wrapper pre {
    float: left;
}

Answer 5

添加display: inline-block应该为FF，Safari和Chrome执行此操作。但请确保检查所有浏览器及其行为，特别是IE

Answer 6

另一种方法：

pre {
    display: table;
    border-collapse: separate;
}

它允许边距自然折叠（与 display: inline-block 相反）。作为奖励，它适用于从 IE8 甚至更早版本开始的各种浏览器。

我可以调整<pre> area to fit the text?</pre>的宽度吗？

6 个答案: