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

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 时才会出现此行为。我尝试使用 white-space 和 word-wrap 等属性，但没有成功。

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

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 中奇怪的文本换行行为

Weird text wrap behavior in nested absolute positioned divs

html

css