html - 绝对定位的 div 被父级切断。

Question

我有如下设置:

http://jsbin.com/hevidoya/2/

如您所见，大量内容文本正在换行，因为它似乎正压在其父元素的边缘。我希望内部 div 能够呼吸并让里面的内容填满它的容器。我不确定如何解决这个问题，但我一直认为绝对定位的元素会破坏盒子模型并且不会表现得像这样。由于父级是相对的，它会开始其相对于父级的位置，但宽度将能够延伸到其父级容器之外。我减少左边的值越多，盒子的行为就越好，但它偏离了我想要的中心。我还查看了用于下拉菜单的 bootstraps CSS 代码，我认为我在做几乎相同的事情。

谁能解释如何解决这个问题，或许还能解释为什么会这样？

Answer 1

你可以使用 white-space : nowrap css

<div style="position: absolute; top: 20px; left: 50px; white-space:nowrap;">
     <p>lots of stuff</p>
</div>

这将防止内容的逻辑换行(换行)，因为 div 包含在其父级中。