简单的HTML / CSS定位问题

Question

出于某种原因，我想我忘记了这里的一些事情。以下是我的代码：

<style type="text/css">
#content {
    width: 400px;
    height: 100px;
    background: orange;
    padding: 10px;
}
</style>
<div id="content">
<h1>what</h1>
foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo
</div>

当加载时，它会显示：

http://grab.by/6Mhp

文字不在文本框内。为什么...？以及如何解决？

Answer 1

添加样式

word-wrap:break-word;

在#content

上

#content {
    width: 400px;
    height: 100px;
    background: orange;
    padding: 10px;
    word-wrap:break-word;
}

Answer 2

我认为CSS不会自动将单词分成几部分以适合 div 。您可以使用overflow:hidden隐藏溢出。如果您的单词不超过div的大小，那么您已经使用的示例应该可以正常工作。

你也可以使用word-wrap:break-word但是，IIRC，它需要IE或CSS3（尽管这可能代表了很多浏览器）。