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

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

所以我的问题是:

1. 为什么我的文本折叠成 4 行而不是 1 行？
2. 如何达到我想要的结果？

---

编辑:

正如@Manish Dalal 所言，这是一种非常奇怪的行为:

Is there any CSS rule applied on div or width of any of the parent is limited?

If I copy only this code (as is) on an HTML page, I can see what you wish to achieve. So I assume that some parent control that have position relative and have limited width (by itself or due to its parents') and hence have limited the width of the div. (As by default a div will take all the horizontal spacing.)

Answer 1

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