html - 浮动元素绝不能脱离 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;

}

当跨度尝试浮动时，您的内容会溢出。这将允许您的跨度保持在其父容器内。

Answer 2

这个答案取决于您将文本包装在元素中的能力，例如p. 最终结果将是：

<div><p>aaaaaaaaaa</p>
  <span>test</span>
</div>

div{
  width: 60px;
  border-bottom: 1px solid red;
  word-break:break-all;
  height: 100%; 
  overflow: auto; /* fix to clear the parent */
}
p {
  padding:0;
  margin:0;
}
span{
  float: right
}

更新小提琴：http: //jsfiddle.net/3kRan/5/