当内容溢出页面时，使非换行div扩展

Question

当div有white-space: pre并且内容太多时，它会溢出页面，添加滚动条。如何让div扩展到它的宽度？

示例：http://jsfiddle.net/TkcTZ/1/

如果向右滚动，您将看到背景仅延伸到视口的右侧，而不是超出溢出文本后面的边缘。如果你用网络工具检查div，你会发现它是因为div只有背景那么宽。

当内容溢出时，如何让div在宽度方向展开？我想要一个CSS / HTML唯一的解决方案（没有javascript）。

Answer 1

display: inline-block;救援！

div {
    white-space: pre;
    background-color: red;
    display: inline-block;
}

Answer 2

我似乎已经通过在包含div上设置display: table和width: 100%来修复它，如下所示：http://jsfiddle.net/TkcTZ/3/

Answer 3

以下更新的小提琴适用于您：

http://jsfiddle.net/TkcTZ/2/

我已使用overflow:auto;更新代码 这可以确保div以其背景覆盖其所有内容。

Answer 4

您可以使用overflow：auto来使div可滚动，以便背景颜色占据div宽度的100％。

div {
    white-space: pre;
    background-color: red;
    overflow: auto;
}

选中此http://jsfiddle.net/nkHGZ/