当内容溢出页面时，使非包装div展开 [英] Make non-wrapping div expand when content overflows the page

问题描述

当div具有 white-space：pre 并且内容太多时，它会溢出页面，添加一个滚动条。

When a div has white-space: pre and has too much content, it will overflow the page, adding a scrollbar. How do I get the div to be as wide as it expands to?

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

如果向右滚动，您会看到背景只能延伸到视口的右边，不能超过溢出文本的边缘。如果你用web工具检查div，你会看到这是因为div只有背景宽度。

If you scroll to the right, you'll see that the background only extends to the right of the viewport, not past the edge behind the overflowing text. If you inspect the div with web tools, you will see that it is because the div is only as wide as the background.

如何使div在横向扩展内容溢出？我想要一个CSS / HTML解决方案（没有javascript）。

How do I make divs expand widthwise when their content overflows? I would like a CSS/HTML only solution (no javascript).

推荐答案

我似乎已经通过设置 display：table 和 width：100％，例如： http://jsfiddle.net/TkcTZ/3/

I seem to have fixed it by setting display: table and width: 100% on the containing div, like so: http://jsfiddle.net/TkcTZ/3/

这篇关于当内容溢出页面时，使非包装div展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！