[英]word-wrap not working properly
I'm fairly new to html & css and I am trying something here but word-wrap property doesn't seem to be working here when I put line longer than width of element. 我对html&css相当陌生,我在这里尝试尝试一些东西,但是当我将行的长度超过元素的宽度时, 自动换行属性似乎在这里不起作用。
JSFiddle link with longer text line. JSFiddle链接带有更长的文本行。 (word-wrap property doesn't work here).
(自动换行属性在这里无效)。
JSFiddle link with short text line. 带有短文本行的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; }
I searched for it and I think it has something to do with float property but couldn't figure out what. 我搜索了它,我认为它与float属性有关,但不知道是什么。
Thank You. 谢谢。
You need to explicitly set a width on the #page element 您需要在#page元素上明确设置宽度
#page {
width: 600px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.