Question

考虑以下代码：

<div id="p1" style="position: absolute">
  <div id="p2" style="position: absolute">
    <div id="c" style="max-width: 120px">
      This text should wrap when exceed 120px
    </div>
  </div>
</div>

不要问我为什么＃p1和＃p2都需要绝对位置，它们是我无法改变的遗留组件的一部分。我希望#c与文本一起增长，直到达到最大宽度120px。但是，如何在示例中看到文本在每个单词处都会断开。

仅当我有2个嵌套父div且位置为absolute时，才会出现此行为。我尝试使用白色空间和自动换行等属性，但没有成功。

我真的很想知道为什么会出现这种行为。有人有答案吗？

Answer 1

绝对定位元素需要宽度和高度设置，否则它们不会扩展。尝试添加一些设置，例如：

#p1, #p2 {
width: 400px;
height: 300px;
}

<div id="p1" style="position: absolute">
  <div id="p2" style="position: absolute">
    <div id="c" style="max-width: 120px">
      This text should wrap when exceed 120px
    </div>
  </div>
</div>

嵌套绝对定位div中的奇怪文本换行行为

1 个答案: