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

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;
}

正如您在此处看到的，侧边栏上的内容位于内容容器下方。我怎样才能避免这种情况，以便它会打破一条线并继续在侧边栏中？

重叠内容

score 2 · Accepted Answer

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

您可以避免在此问题上添加省略号#sidebar：

overflow: hidden;
text-overflow: ellipsis;

score 0 · Accepted Answer

有2种方法：

1）添加

自动换行：断词；

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

2) 添加

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

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

score 0 · Accepted Answer

您的文本比容器的宽度更宽，并且溢出到相邻的 div 中。

即：TestTestTestTestTest > 15% 宽度

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

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

3 回答 3