元素不占用孩子的宽度

Question

我有<pre>并且我在其中放入了一些内容，其中它可能比窗口的宽度长。我期待<pre>将占用其子女的宽度，但是似乎并非如此。 <pre>正在应用窗口的宽度而不是内部的内容。

演示：http://jsfiddle.net/DerekL/d6Avv/1/

据我所知，<pre>似乎有width: 100%默认值，导致此问题。

我正在寻找解决此问题的方法。但是，仅限CSS的解决方案更为可取。

Answer 1

不确定这是否会根据你周围的内容，但设置

display: inline-block;

pre上的

导致pre的宽度与其内容相匹配。

---

修改：JSFiddle

在这个小提琴中，我添加了一个div来包裹pre，这可以防止inline-block弄乱任何布局，因为div应该是display: block;。

Answer 2

添加

white-space: normal;

到pre的风格。

此元素的默认用户代理样式为white-space: nowrap;，它仅在换行符时明确地断行，从而扩大整个元素。