为什么段落标记溢出而不是创建新行？

每当我创建一个P标签并用代码填充时，它会溢出而不是创建新行。 CSS：为什么段落标记溢出而不是创建新行？

#main { 
width: 700px; 
margin-right: auto; 
margin-left: auto; 
font-family: Arial, Helvetica, sans-serif; 
} 
#main #top h1 { 
    text-align: center; 
    font-size: 48px; 
    margin: 0; 
} 
#main #menucontainer { 
    width: 700px; 
    border: 1px solid black; 
} 
#main #menucontainer ul { 
    list-style-type: none; 
    margin: 0 auto; 
    padding: 0px; 
    width: 255px; 
} 
#main #menucontainer ul li a { 
    font-size: 18px; 
    text-decoration: none; 
    color: #000; 
    display: block; 
    padding: 5px 10px; 
    text-align: center; 
    float: left; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #000; 
} 
#main #menucontainer ul li a:hover { 
    background-color: black; 
    color: white; 
} 
#main #menucontainer ul li a.current { 
    background-color:#CCC; 
    color: black; 
} 


#main #footer { 
    margin-top: 10px; 
    text-align: center; 
    font-style:italic; 
}

HTML：

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Home</title> 

<link href="styles.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

<div id="main"> 

<div id="top"> 

<h1>Home</h1> 

</div> 

<div id="menucontainer"> 

<ul> 

<li><a href="index.php" class="current">Home</a></li> 

<li><a href="submit.php">Submit</a></li> 

<li><a href="contactus.php" style="border-right:solid 1px black;">Contact Us</a></li> 

</ul> 

<div style="clear:both;"></div> 

</div> 

<p>asdfhsadfkjasdjkcnakdsjnfkjdsanckjdsanfjkhaskjcnjksdankjfhasdknjcnadsjkfhkjsdhfkjncjsdnfjaksdhfkjadshfjkcndasjknf</p> 

<div id="footer">2011</div> 

</div> 

</body> 

</html>

来源

2011-01-12 Chris

添加word-wrap:break-word到您的段落样式

来源

2011-01-12 00:28:52

该作品http://jsfiddle.net/BgGRL/ – 2011-01-12 00:30:53

您的文字是单个单词所以为<p>标记符文进入一个新行没有在那里。

如果您想强制换行而不考虑文本，可以尝试为<p>标记设置特定的宽度（使用width：inherit或使用实际大小），然后设置white-space属性预先包装。在white-space attribute

p { 
    width:inherit; /* width: 100px; */ 
    white-space: pre-wrap; 
}

更多信息。

来源

2011-01-12 00:26:15 zellio

的p标签只会让像空格，连字符和其他标点符号的换行字符的新线。（尝试在长asdf行的中间插入一个空格。）

如果要创建不可见的分词符，您可以尝试在http://gojomo.blogspot.com/2005/03/cross-browser-invisible-word-break-in.html处建议的选项。

来源

2011-01-12 00:29:25 Noah

为什么段落标记溢出而不是创建新行？

回答

相关问题