Question

代码：

#a {
  position: absolute;
  left: 100px;
}

#b {
  position: absolute;
  left: 200px;
  top: 100px;
}

<div id="a">
    test test test test<span id="b">xxxx xxxx xxxx xxxx</span>
</div>

结果是这样的：

          test test test test

                                          xxxx 
                                          xxxx 
                                          xxxx 
                                          xxxx

您可以看到我的“xxxx”文本分为4行。

但我想要的是：

          test test test test

                                          xxxx xxxx xxxx xxxx

所以我的问题：

为什么我的文字折叠成4行而不是1行？
如何达到我想要的效果？

编辑：

正如@Manish Dalal所说，这是一个非常奇怪的行为：

是否有任何CSS规则应用于div或任何父级的宽度是否有限？

如果我只在HTML页面上复制此代码（按原样），我可以看到您希望实现的目标。因此，我假设某些父控件具有相对位置且宽度有限（单独或由于其父项），因此限制了div的宽度。（默认情况下，div将采用所有水平间距。）

Answer 1

对于绝对定位（position: absolute），需要宽度，因为未指定文件被包裹width。

以下几个解决方案：

将position:absolute更改为position: relative #b。最合适的。
将width添加到#b。
将white-space: nowrap;添加到#b以避免文本换行。这将使较长的文本与滚动条一起显示在一行中。不太可取。

查看以下演示。

#a {
  position: absolute;
  left: 100px;
}
#b {
  position: absolute;
  left: 200px;
  top: 100px;
  white-space: nowrap;
}

<div id="a">
  test test test test<span id="b">xxxx xxxx xxxx xxxx</span>
</div>

Answer 2

在b情况下将绝对值更改为相对

Answer 3

是否在div上应用了任何CSS规则，或者任何父级的宽度是否有限？

如果我只在HTML页面上复制此代码（按原样），我可以看到您希望实现的目标。因此，我假设某些父控件具有位置relative并且具有有限的宽度（单独或由于其父级），因此限制了div的宽度。（默认情况下，div将采用所有水平间距。）

Answer 4

使用position:fixed;

#b {
 position: fixed;
 left: 200px;
 top: 100px;
}

Answer 5

＆＃13;

#a {
  position: absolute;
  left: 100px;
}
#b {
  position: fixed;
  left: 200px;
  top: 100px;
  white-space: nowrap;
}

＆＃13;

<div id="a">
  test test test test<span id="b">xxxx xxxx xxxx xxxx</span>
</div>

＆＃13;

Answer 6

如果你想要它而不是nowrap，你需要为#b定义宽度，然后使用width和display属性来定义css。

#a {
  position: absolute;
  left: 100px;
}

#b {
  white-space: nowrap;
  position: absolute;
  left: 200px;
  top: 100px;
}

<div id="a">
    test test test test<span id="b">xxxx xxxx xxxx xxxx</span>
</div>

Answer 7

为什么要使用绝对定位来进行这种对齐。只是改变一下标记，例如：

https://jsfiddle.net/yrtfay0k/1/

而不是绝对定位，您只需浮动项目。

float:right

但这实际上取决于你真正想要实现的目标，更具体，有很多选择可以解决它。

为什么我的文字折成4行？

7 个答案: