Question

每当我创建一个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>

Answer 1

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

Answer 2

您的文字只有一个单词，因此<p>标记无法将文本分成新行。

如果你想在不考虑文本的情况下强制换行，请自行尝试为<p>标签设置特定宽度（通过使用width：inherit或使用实际大小）然后设置白色-space属性预包装。

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

有关white-space attribute的更多信息。

Answer 3

p标记只会在包含空格，连字符和其他标点符号的换行符上创建换行符。（尝试在长asdf行的中间插入一个空格。）

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

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

3 个答案: