html - float 元素永远不能离开 div

Question

按照我的代码:

HTML:

<div>aaaaaaaaaaaaaaa
    <span>test</span>
</div>

CSS:

div{
    width: 60px;
    border-bottom: 1px solid red;
    word-break:break-all;
}
span{
    float: right
}

我会得到这个结果:http://oi41.tinypic.com/2py25w1.jpg
我希望右浮动的文本不必离开 div，因此它必须在需要时转到 div 内的新行，就像我发布的代码一样。在这种情况下，例如，无需放开新行中的文本，因为文本适合文本的右侧:http://jsfiddle.net/3kRan/2/

Answer 1

像这样将 div 上的溢出设置为隐藏:

div{
    width: 60px;
    border-bottom: 1px solid red;
    word-break:break-all;
    overflow: hidden;

}

当 span 试图 float 时，您的内容会溢出。这将使您的 span 保留在其父容器内。