html - 当内容溢出页面时，使非包装 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

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

Answer 3

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

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

检查这个http://jsfiddle.net/nkHGZ/

Answer 4

以下更新的小提琴应该适合您：

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

我已经更新了代码，overflow:auto; 这确保了 div 用它的背景覆盖了它的所有内容。