logo标签列表

为什么段落标签会溢出而不是换行？

htmlcss
12

每当我创建一个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>
3个回答
26

在你的段落样式中添加word-wrap:break-word

@Grillz 谢谢你，这太有帮助了。 - John
11

您的文本只有一个单词，因此没有地方可以使用<p>标签将文本换行。

如果您想强制换行而不考虑文本本身，请尝试为<p>标签设置特定宽度（使用width:inherit或实际大小），然后将white-space属性设置为pre-wrap。

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

关于 white-space 属性 的更多信息。

word-wrap: break-word 也是必需的。 - chankruze
3
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接