html - 如何避免嵌套位置 : absolute elements? 中的文本换行

Question

在我的应用程序中，有两个嵌套的“position: absolute”元素，内部元素包含一些动态加载的文本。

问题是文本中的每个单词都在换行，而我更希望它根本不换行。问题是 inner 是绝对的，因此流出，所以 outer 的计算宽度为 0，这意味着文本溢出到其父级的边界之外, 所以它换行。

这是正在发生的事情:https://jsfiddle.net/y9pLgzub/

这就是我想要发生的事情，除了没有明确的大小:https://jsfiddle.net/pv2g3rwo/

有什么方法可以维护 HTML 结构(两个嵌套的绝对 div)，但要使 inner 中的文本不换行？理想情况下，外部元素会扩大大小以适应整个内部元素，尽管它是“position: absolute”。

Answer 1

由于.inner 和.outer 都是position: absolute，所以.outer 不能根据child 扩展大小。必须明确说明尺寸。

至于自动换行问题。你可以试试 white-space: nowrap;

.outer {
  position: absolute;
  top: 100px;
  left: 100px;
  border: 1px solid black;
}

.inner {
  position: absolute;
  top: 10px;
  left: 10px;
  border: 1px solid red;
   white-space: nowrap;
}

<div class="outer">
  <div class="inner">
      asdf asdf
  </div>
</div>