Text is supposed to go onto new lines in paragraph, but doesn't

Question

I have a simple paragraph within a sample website I am attempting to create. However, whenever I put in a large amount of text in the paragraph, instead of going to a new line it waits until it hits the body's margin limit, despite the fact I have specified a certain width. 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>

Because there's no white space within the paragraph. Try adding `word-break: break-all;`. — Hashem Qolami, Sep 13 '14 at 15:35
Didn't work. Found quite a few "solutions" with the word-break element in them and they all turned out the same: nothing. — ajc2000, Sep 13 '14 at 15:37
It seems that it is working : http://jsbin.com/xifefe/1/edit — Hashem Qolami, Sep 13 '14 at 15:40
@RecentWebDev2000:check my demo in the answer,created with your given markup and css just added word-break: break-all; — Sajad Karuthedath, Sep 13 '14 at 15:42
Never mind; just switched around what you said to do and it worked! Thanks a bunch! — ajc2000, Sep 13 '14 at 15:45
@RecentWebDev2000 Note that [`hgroup` element is dropped](http://stackoverflow.com/questions/15808330/hgroup-removed-from-html5-specification-what-now) and also `p` is not a valid child of `hgroup`. The spec [states](http://www.w3.org/html/wg/drafts/html/master/common-idioms.html#sub-head): `h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.` But there are alternatives. — Hashem Qolami, Sep 13 '14 at 15:54

score 1 · Accepted Answer · answered Sep 13 '14 at 15:40

1

YOUR FIDDLE

AND

FIXED FIDDLE DEMO

It works quite well with

p{

    word-break: break-all;
}

answered Sep 13 '14 at 15:40

Sajad Karuthedath

14,987
4
32
49

Yup, just had to add a few things(see comments above), and it worked great! Thanks! – ajc2000 Sep 13 '14 at 15:47
The OP had a spelling error in the original fiddle hrgroup instead of hgroup, which is why the extra property for word-break was not having an effect. – Marc Audet Sep 13 '14 at 16:01

score 1 · Answer 2 · answered Sep 13 '14 at 15:50

1

Try the following:

hgroup p {
    width:200px;
    word-break: break-all;
    border: 1px dotted blue;
}

See demo at: http://jsfiddle.net/qo4ckf0g/

Note: spell the tag name correctly.

answered Sep 13 '14 at 15:50

Marc Audet

46,011
11
63
83

It doesn't need to have an explicit `width`. – Hashem Qolami Sep 13 '14 at 15:53
1

The OP had the width in it, so I kept it as such. – Marc Audet Sep 13 '14 at 15:54

Text is supposed to go onto new lines in paragraph, but doesn't

2 Answers2