绝对定位的div被父元素裁剪。

Question

我有以下类似的设置：

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

正如您所看到的，大量的文本正在换行，似乎紧贴着其父元素的边缘。我希望内部div能够自由呼吸，并且容器内的内容填充它。我不确定如何解决这个问题，但我一直认为绝对定位的元素会破坏框模型，并且不会像这样表现。由于父元素是相对的，它会从父元素开始其位置，但宽度可以扩展到其父容器之外。我减小左值的越多，框的行为就越好，但它与我想要的中心位置偏离。我还查看了Bootstrap CSS代码以进行下拉菜单，我认为我正在做基本相同的事情。有人能解释如何修复这个问题，并可能解释为什么会发生这种情况吗？

- Siraris

---

请在您的问题中总是附上代码。 - j08691

Answer 1

你可以使用 white-space: nowrap CSS。

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

这将防止逻辑换行（断行）您的内容，因为div包含在其父元素内。

- Vincent Duprez

Answer 2

您需要在绝对定位的元素上设置宽度属性。

width: 100%

- Kyle Needham