Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Kristian Woods
Kristian Woods
23,414 Points

Why is the text not wrapping to the next line?

Its crazy that I'm asking this question at this point in my treehouse education, however, I can't find a solution.

Basically, I'm playing around with text and container divs. There are 3 text columns inside the container div that adapt to the viewport width. Once in the smallest width, the text adjusts and wraps to the next line to a one column layout.

The issue is that when I add an extreme amount of text to the existing columns in the HTML, the text doesn't wrap with other text. It breaks and stretches across the 3 columns. Funny thing is, is that the original columns adjust accordingly to the viewport width, but the additional text that I insert doesn't wrap at all.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <div class="wrap">
            <header class="main-header">
                <div class="container clearfix">
                    <h1 class="name"><a href="index.html">Kristian Woods Designer</a></h1>
                    <ul class="main-nav">
                        <li><a href="aboutme.html">About Me</a></li>
                        <li><a href="#">Contact Me</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Portfolio</a></li> 
                    </ul>
                </div>
            </header>

            <div class="banner">
                <h2>Web Developer</h2>
                <p>Hello World!</p>
            </div>

            <div class="wrap">

                    <div class="container clearfix">

                        <div class="primary col">
                            <h2>Main Heading 1</h2>
                            <p>Body text here!</p>
                            <p>Everything in this city is worth waiting in line for.</p>
                            <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbonhjhgjhgjkhgjkhgjkhgjkhgjkhgjkhgjkhgjkhghjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhgjhg brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
                            <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
                        </div>

                        <div class="secondary col">
                            <h2>Main heading 2</h2>
                            <p>Body text here!</p>
                            <p>Everything in this city is worth waiting in line for.</p>
                            <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
                            <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
                        </div>
                         <div class="tertiary col">
                            <h2>Main heading 3</h2>
                            <p>Body text here!</p>
                            <p>Everything in this city is worth waiting in line for.</p>
                            <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
                            <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
                        </div>

                    </div>

            </div>
            <footer class="main-footer">
                <span>&copy;Kristian Woods Design.</span>
            </footer>
        </div>

    </body>
</html>

CSS

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}

p {
    font-size: .95em;
    margin-bottom: 1.8em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}


/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
    font-size: 1.25em;
    margin: 0;
}

.main-nav {
    margin-top: 5px;
}

.name a,
.main-nav a {
    text-align: center;
    display: block;
    padding: 10px 15px;
}

.main-nav a {
    color: mediumvioletred;
}

.main-nav a:hover {
    color: #093a58;
}



/* ---- Layout Containers ---- */

.main-header {
    padding-top: .5em;
    padding-bottom: .5em;
}

.banner,
.main-footer {
    text-align: center;
}

.banner {
    color: #fff;
    background: mediumvioletred;
    padding: 3.2em 0;
    margin-bottom: 60px;
}

.banner h2 {
    color: #fff;
}

.col {
    padding: 0 1em;
}

.main-footer {
    color: #fff;
    background: mediumvioletred;
    padding: 2em 0;
    margin-top: 30px;
}

.wrap {
    min-height: calc(100vh - 86px)
}


/* ---- Page Elements ---- */



/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

    .container {
        width: 90%;
        margin: 0 auto;
    }

    .wrap {
    min-height: calc(100vh - 86px)
}

    .col {
        display: inline-block;
        width: 50%;
        margin-right: -4px;
        vertical-align: top;
        padding-left: 1em;
        padding-right: 1em;
    }



    .tertiary {
        display: block;
        width: 100%;
    }

    .name {
        float: left;
    }

    .main-nav {
        float: right;
    }

    .main-nav li {
        float: left;
        margin-left: 12px;
    }
    .banner h2 {
        font-size: 2em;
        margin-bottom: 0;
        padding-bottom: 0;

    }

    .banner p {
        font-size: 2em;
        margin: 0;
        padding: 0;
    }


    .about-primary {
        display: block;
        width: 100%;
    }


    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }

}

@media (min-width: 1025px) {

    .container {
        width: 80%;
        max-width: 1150px;
    }


    .primary {
        width: 40%;
    }

    .tertiary {
        display: inline-block;
    }

    .banner h2 {
        font-size: 3.5em;
        margin-bottom: 0;
        padding-bottom: 0;

    }

    .banner p {
        font-size: 2em;
        margin: 0;
        padding: 0;
    }

    .secondary,
    .tertiary {
        width: 30%;
    }

    .about-primary {
        display: block;
        width: 100%;
    }

}

1 Answer

Steven Parker
Steven Parker
242,191 Points
Steven Parker
Steven Parker
242,191 Points

It's not that it is an extreme amount of text, it's that it is all one word. Wrapping doesn't normally occur inside a word, only between words.

:point_right: Try adding "word-wrap: break-word;" to your <p> tag.

Kristian Woods
Kristian Woods
23,414 Points

Ah! ok, thanks, man!