文本应该放在段落中的新行,但不是
我在我尝试创建的示例网站中有一个简单的段落。但是,每当我在段落中输入大量文本时,尽管事实上我已指定了一定的宽度,但它不会等到它达到身体的边距限制时才换行。 CSS:文本应该放在段落中的新行,但不是
*{
margin:0px;
padding:0px;
}
h1{
font: bold 20px Arial;
}
h2{
font: bold 14px Arial;
}
header, section, footer, aside, nav, hgroup, article{
display:block;
}
body{
text-align:center;
}
#body-wrapper{
border: 1px solid black;
width:1000px;
margin: 20px auto;
text-align: left;
}
#top-heading{
background-color: blue;
padding: 20px;
}
#nav-bar{
background-color: green;
color: white;
font: bold 14px Arial;
}
#nav-bar ul{list-style-type:none;}
#nav-bar li{
display:inline-block;
padding: 7px;
}
#main-content{
float:left;
width:660px;
margin:30px;
background-color:#E8E8E8;
box-shadow: 5px 5px 5px #888888;
margin-bottom:100px;
border-radius:15px;
left:20px;
}
#side-content{
float:left;
width:220px;
margin: 20px 0px;
padding:30px;
}
#bottom-info{
clear:both;
text-align:center;
padding:10px;
border-top: 1px solid black;
}
article{
padding:25px;
}
hrgoup p{
width:200px;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>AJC inc.</title>
<link rel="stylesheet" href="main.css">
<script src="javascript.js"></script>
</head>
<body onLoad="browserCheck();">
<header id="top-heading"><h1>Temporary header</h1>
</header>
<div id="body-wrapper">
<nav id="nav-bar">
<ul>
<li>Stuff</li>
<li>Mo stuff</li>
<li>Pizza</li>
</ul>
</nav>
<section id="main-content">
<article>
<hgroup>
<h1>Header 1</h1>
<h2>Sub header</h2>
<p>Info goes here</p>
</hgroup>
</article>
<article>
<hgroup>
<h1>Header 2</h1>
<h2>Sub header 2</h2>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</hgroup>
</article>
</section>
<aside id="side-content">
</aside>
<footer id="bottom-info">
<p>Copyright 2014 AJC</p>
</footer>
</div>
</body>
</html>
是的,只是不得不添加一些东西(见上面的注释),它运作得非常好!谢谢! – ajc2000 2014-09-13 15:47:35
OP在原始小提琴hrgroup而不是hgroup中存在拼写错误,这就是为什么word break的额外属性没有效果的原因。 – 2014-09-13 16:01:32
尝试以下操作:
hgroup p {
width:200px;
word-break: break-all;
border: 1px dotted blue;
}
见演示在:http://jsfiddle.net/qo4ckf0g/
注:正确拼写的标签名。
它不需要明确的'width'。 – 2014-09-13 15:53:27
OP有宽度,所以我保持这样。 – 2014-09-13 15:54:33
因为段落内没有空格。尝试添加'word break:break-all;'。 – 2014-09-13 15:35:40
没有工作。发现了不少“解决方案”,其中包含了单词分解元素,它们都是一样的:没有什么。 – ajc2000 2014-09-13 15:37:26
在HTML5中,hgroups不能包含p元素。 – j08691 2014-09-13 15:40:28