浮动侧边栏进入主容器的内容

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上添加省略号：

overflow: hidden;
text-overflow: ellipsis;

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

Answer 2

有两种方法：

1）添加

  

自动换行：打破字;

在你的#sidebar中

。因为TestTestTestTest是单个单词，所以你需要应用我提到的css。

Description about word-wrap

2）添加

  溢出：隐藏;文本溢出：省略号;

到#sidebar。这种方法虽然不会破坏界限。

Description about text-overflow

Answer 3

您的文字宽于容器的宽度，并溢出到相邻的div中。

ie：TestTestTestTestTest＆gt; 15％宽度

将侧边栏div中的内容更改为仅测试例如将停止与相邻div重叠的文本。

我希望将div的溢出更改为隐藏，以便不会显示任何不适合框内的文本，而不是溢出。