当内容溢出页面时，使非包装 div 展开答案

【问题标题】：Make non-wrapping div expand when content overflows the page当内容溢出页面时，使非包装 div 展开
【发布时间】：2013-08-14 12:02:31
【问题描述】：

当一个div有white-space: pre，内容过多时，会溢出页面，增加滚动条。如何让 div 的宽度与展开时一样宽？

如果您向右滚动，您会看到背景仅延伸到视口的右侧，而不是超出溢出文本后面的边缘。如果您使用网络工具检查 div，您会发现这是因为 div 仅与背景一样宽。

当内容溢出时，如何让 div 横向扩展？我想要一个仅 CSS/HTML 的解决方案（无 javascript）。

【问题讨论】：

【解决方案1】：

display: inline-block; 来救援！

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

【讨论】：

我不能把它做成 inline-block，因为每一个都需要在自己的行上，而且它也需要像普通的 div 一样占据 100% 的宽度。用 width: 100% 做 inline-block 有同样的问题。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：