Css 我可以调整a<；的宽度吗；预处理>；适合文本的区域？

我有以下资料：

<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 {
    white-space: pre-wrap;
}

我希望红色背景在代码最右边的字符之后停止。我不想看到从页面的一侧延伸到另一侧的大红色区域

有人能告诉我，如果有可能做到这一点与CSS。我真的不确定，因为我想不出我能做什么

---

谢谢

您可以使用

显示：内联块：


尽管请查看浏览器支持，因为如果IE不支持它，我不会感到惊讶。
您可以使用
float:left
和清除
div
来实现这一点

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

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

Lorem ipsum
.预包装{
溢出：隐藏；
}
.pre-wrapper-pre{
浮动：左；
}
添加
显示：内联块
应该适用于FF、Safari和Chrome。
但请确保检查所有浏览器及其行为，特别是IE，这是迄今为止最好的解决方案：

还有一种方法：

它允许边距本机折叠（与
display:inline block
相反）。作为奖励，它适用于从IE8甚至更早版本开始的各种浏览器。
你能告诉我们什么是
xwidth
？以前是width，后来我发现它不起作用，所以我只是把x放在那里，这样参数就没什么作用了。你的答案看起来不错。但有一个小问题。我没有权限进入并更改HTML中的任何内容。这来自数据存储。有没有办法不用包装纸就能做到？例如，我可以用某种方式在CSS中的pre之后进行“清除”？很难。在这种情况下，
内联块
是最好的选择，只有IE7-AFAIK无法处理。
pre {
    white-space: pre-wrap;
}

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