html - float 侧边栏的内容转到主容器

Question

假设我有这个 html:

<div id="sidebar">
 TestTestTestTestTestTest
</div>
<div id="content">
 Content
</div>

还有这个 CSS:

#sidebar {
 float:left;
 width:15%;    
 border:1px solid red;
}
#content {
 float:left;
    width:75%;
    border:1px solid green;
}

如你所见here ，侧边栏上的内容位于内容容器下方。我怎样才能避免这种情况，以便它会换行并在侧边栏中继续？

Answer 1

如果没有空格，则无法管理文本。

您可以避免在这个问题上在 #sidebar 上添加 ellipsis:

overflow: hidden;
text-overflow: ellipsis;

http://jsfiddle.net/t4rNp/3/