javascript - 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 .