Any idea how to stop paragraph from going over its div?

Question

I'm currently trying to make a blog. When I try to make a "preview" of the body of the post. The first post seems to be fine, but the second post goes over its div. I tried changing what tags to use and css formatting but it stays like that.

My code:

HTML

<div class="module">
        <div class="blog">
            <div class="recents">
                <h2>Recent Posts</h2>

                <br><br>
                <?php

                $sql = "select title, body, created_at FROM posts";
                $result = mysqli_query($link, $sql);
                $query = mysqli_query($link, $sql) or die(mysqli_error($link));
                while ($row = mysqli_fetch_assoc($query)) {
                    $title = $row['title'];
                    $body = $row['body'];
                    $created_at = $row['created_at'];

                    if (strlen($body) > 500) {
                        $body = substr($body, 0, 500);
                    }

                    echo "<h3>" .  $title . "</h3><br>";
                    echo "<p>" .  $body . "</p>";
                    echo "<small>" .  $created_at . "</small>";
                    echo "<br><br>";
                }
                ?>


            </div>

            <div class="categories">
                <h3>Categories</h3>

            </div>


        </div>

CSS

html {
    font-family: 'IBM Plex Serif', serif;
}

.module {
    background-color: #fffff7;
    box-shadow: 3px 10px 18px #888888;
    padding-top: 70px;
    padding-left: 130px;
    border: 1px solid;
    width: 1080px;
    margin-left: 380px;
    height: 821px;
}

.blog {
    display: flex;
    flex-direction: row;
    text-align: left;
}

.recents {
    flex-grow: 2;
    width: 570px;
}

.categories {
    flex-grow: 1;
}

Any help would be appreciated.

It is a very bad idea to use `die(mysqli_error($conn));` in your code, because it could potentially leak sensitive information. See this post for more explanation: [mysqli or die, does it have to die?](https://stackoverflow.com/a/15320411/1839439) — Dharman, Jun 21 '20 at 19:29
Doesn't look like there's any white space at all between that very long string (while the first block seem to have spaces). If you add some spaces, you should get wrapped lines. — M. Eriksson, Jun 21 '20 at 19:29

score 0 · Accepted Answer · answered Jun 21 '20 at 18:29

0

It is because there are no spaces

to fix this try this:

word-wrap: break-word;

answered Jun 21 '20 at 18:29

Karan

16

thanks! sorry but i got another question. the second post is perfect but i see how the first one doesn't match. – inn0ichi Jun 21 '20 at 18:37

Any idea how to stop paragraph from going over its div?

1 Answers1