如何避免文本在嵌套位置换行：绝对元素？答案

【问题标题】：How can I avoid text wrapping in nested position: absolute elements?如何避免文本在嵌套位置换行：绝对元素？
【发布时间】：2019-06-14 13:22:59
【问题描述】：

在我的应用程序中，有两个嵌套的“位置：绝对”元素，内部元素包含一些动态加载的文本。

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

这是发生了什么：https://jsfiddle.net/y9pLgzub/

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

有什么方法可以维护 HTML 结构（两个嵌套的绝对 div），但可以使 inner 中的文本不换行？理想情况下，外部元素会扩大尺寸以适应整个内部元素，尽管它是“位置：绝对”。

【问题讨论】：

标签： html css css-position absolute

【解决方案1】：

由于 .inner 和 .outer 都是 position: absolute，因此 .outer 无法根据子级扩展大小。尺寸必须明确说明。

至于换行问题。你可以试试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>

【讨论】：

【解决方案2】：

您可以通过在.inner{} 中包含whitespace: nowrap; 来做到这一点

【讨论】：

【解决方案3】：

也许少即是多：当在外部使用填充而不是偏移内部时，计算应该是正确的：

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

.inner {
  border: 1px solid red;
}

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

https://jsfiddle.net/du2f8tsb/

【讨论】：