div中的文本溢出不按预期工作！

Question

我有以下HTML：

<div style="position:absolute;width:300px;background:yellow">
    <div style="position:relative;height:20px;width:150px;left:0;
                                                 background:red;overflow:visible">
       this text should overflow into the parent div!
    </div>
</div>

我希望文本溢出到父div的右侧，但它包装到子div中的下一行。怎么办呢？

Answer 1

文本和内联元素通常会在width CSS属性/声明中定义的父元素的width约束内包装。

要强制执行单行溢出，您可以使用不带空格，连字符或其他中断字符的字符串（基本上是任何非字母数字字符）。或者您可以使用：

white-space: nowrap;

声明，强制文本/内嵌内容为一行。虽然这排除了任何包装，但这本身可能会成为问题。

稍微折磨JS Fiddle demo。

Answer 2

将以下内容添加到相对div

whitespace: nowrap

Fiddle

read this