Question

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

问题在于文本是沿每个单词包装的，而我希望它根本不包装。问题是const userObj: undefined | User = userDocument && userDocument.toObject()是绝对的，因此没有流量，因此inner的计算宽度为0，这意味着文本在其父代的边界之外溢出，因此自动换行。 / p>

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

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

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

Answer 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>

Answer 2

您可以在whitespace: nowrap;中加入.inner{}

Answer 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/

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

3 个答案: