考虑以下代码:
<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 时,才会出现此行为。我尝试使用空白和自动换行等属性,但没有成功。
我真的很想知道为什么会发生这种行为。有人有答案吗?
最佳答案
绝对定位的元素需要设置宽高,否则不展开。尝试添加一些设置,例如:
#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>
关于html - 嵌套绝对定位 div 中奇怪的文本换行行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42450869/