html - 不包含文本

Question

我做了一个非常基本的布局。

http://jsfiddle.net/kK7Rk/

HTML

<div id="container">
    <div id="logocontainer">
    </div>
    <div id="navigationcontainer">
    </div>
    <div id="textcontainer">
    </div>
    <div id="sidebarcontainer">
        TEXTTEXTEXTTEXTTEXTEXTTEXTTEXTEXTTEXTTEXTEXTTEXTTEXTEXT.
    </div>
</div>​

CSS

* {
margin:0;
padding:0;
}
#container {
margin:0px auto;
width:600px;
height:1000px;
background:red;
}
#logocontainer {
float:left;
width:50%;
height:15%;
background:green;
}
#navigationcontainer {
float:right;
width:50%;
height:15%;
background:orange;
}
#textcontainer {
margin:10px;
float:left;
width:70%;
height:83.2%;
background:purple;
}
#sidebarcontainer {
margin:10px;
float:right;
width:23.33%;
background:yellow;
}​

即使我为 div 设置了边距，里面的文本仍在其边界之外流动。

有人可以告诉我问题是什么吗？

谢谢，

老年鼠尾草。

Answer 1

大多数浏览器不知道如何打断这么长的单词，你必须给它一点帮助。

添加word-break:break-all;到#sidebarcontainer. 这是有关W3Schools的更多信息。

Answer 2

问题是您的文本没有空格，因此无法换行。如果您添加它overflow:hidden;，#sidebarcontainer它将隐藏溢出并保留您的布局。