文本应该放在段落中的新行，但不是

我在我尝试创建的示例网站中有一个简单的段落。但是，每当我在段落中输入大量文本时，尽管事实上我已指定了一定的宽度，但它不会等到它达到身体的边距限制时才换行。 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>

来源

2014-09-13 ajc2000

因为段落内没有空格。尝试添加'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

YOUR FIDDLE

和

FIXED FIDDLE DEMO

它工作的很好用

p{ 

    word-break: break-all; 
}

来源

2014-09-13 15:40:43

是的，只是不得不添加一些东西（见上面的注释），它运作得非常好！谢谢！ – 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/

注：正确拼写的标签名。

来源

2014-09-13 15:50:47

它不需要明确的'width'。 – 2014-09-13 15:53:27

OP有宽度，所以我保持这样。 – 2014-09-13 15:54:33

文本应该放在段落中的新行，但不是

回答

相关问题