html - 自动换行无法正常工作

我对html＆css相当陌生，我在这里尝试一些东西，但是当我将行的长度超过元素的宽度时，自动换行属性似乎在这里不起作用。

JSFiddle链接带有较长的文本行。 （自动换行属性在这里无效）。

JSFiddle带有短文本行的链接。

/* Site Colors:
  #1A446C - blue grey
  #689DC1 - light blue
  #D4E6F4 - very light blue
  #EEE4B9 - light tan
  #8D0D19 - burgundy
*/

html { height: 100%; width: 100%; }
body {
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px; line-height: 15px;
  background: #EEE4B9;
}
img { border: none; }
a { color: #8D0D19; }
a:hover { color: #1A446C; }

#header {
    height: 70px;
    margin: 0; padding: 0; text-align: left;
  background: #1A446C; color: #D4E6F4;
}
#header h1 { padding: 1em; margin: 0; }
#main {
    height: 600px; width: 100%;
    margin: 0; padding: 0;
    background: #EEE4B9;
}
#footer {
    clear: both;
    height: 2em; margin: 0; padding: 1em;
    text-align: center;
  background: #1A446C;  color: #D4E6F4;
}

/* Navigation */
#navigation {
    float: left;
    width: 150px; height: 100%;
    margin: 0; padding: 0 2em;
    color: #D4E6F4; background: #8D0D19;
}
#navigation a { color: #D4E6F4; text-decoration: none; }
#navigation a:hover { color: #FFFFFF; }
ul.topics {
    margin: 1em 0; padding-left: 0; list-style: none;
}

/* Page Content */
#page {
    float: left;
    height: 100%;
    word-wrap: normal;
    padding-left: 2em; vertical-align: top;
    background: #EEE4B9;
}
#page h2 { color: #8D0D19; margin-top: 1em;}
#page h3 { color: #8D0D19; }

我搜索了它，我认为它与float属性有关，但不知道是什么。

谢谢。

最佳答案

您需要在#page元素上明确设置宽度

#page {
    width: 600px;
}

http://jsfiddle.net/xupVJ/

关于html - 自动换行无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20407590/