文本与“空白：正常”重叠

Question

I'm having a problem here where the text overlaps even though the parent div has white-space: normal .

Here's my code:

div.newsfeed {
    margin: 0 20%;
    min-height: 5%;
    background: rgba(255, 255, 255, .2);
    border-radius: 10px;
    padding: 2%;
    border: 2px solid var(--color1);
}


div.newsfeed div.apost {
    background: rgba(255, 255, 255, .1);
    margin: 3% 0;
    padding: 2%;
    border-radius: 10px;
    min-height: 197.049px;
}

div.newsfeed div.apost div.postarea {
    padding: 2%;
}

div.newsfeed div.apost div.headpost {
    display: flex;
    align-items: center;
}

div.newsfeed div.apost div.headpost a img {
    width: 40px; height: 40px;
    border-radius: 50%;
    float: left;
}

div.newsfeed div.apost div.headpost div.namedate {
    margin-left: 1%;
}

div.newsfeed div.apost div.headpost div.namedate a p#uname {
    display: block;
    font-size: 18px;
    color: white;
}

div.newsfeed div.apost div.headpost div.namedate a p#date {
    font-size: 12px;
    color: #929292;
}

div.newsfeed div.apost div.centerpost {
    white-space: normal;
}

div.newsfeed div.apost div.centerpost a p {
    font-size: 18px;
}

div.newsfeed div.apost div.bottompost {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55.75px;
}

div.newsfeed div.apost div.bottompost a {
    margin: 0 5%;
    padding: 1% 5%;
    font-size: 20px;
    border-radius: 5px;
}

div.newsfeed div.apost div.bottompost a:hover {
    background: rgba(255, 255, 255, .1);
}

<div class="newsfeed">
    <div class="apost">
    <div class="headpost postarea">
        <?php

            $image = "../../images/pfp-placeholder.png"

        ?>
        <a href="../profile/profile.php">
            <img src="<?php echo $image ?>" alt="<?php echo $user_data['uname'] . "'s Profile" ?>" />
        </a>
        <div class="namedate">
            <a href="../profile/profile.php">
                <p id="uname">@<?php echo $USER_ROW['uname'] ?></p>
            </a>
            <a href="../profile/profile.php">
                <p id="date">
                    <?php echo $ROW['date'] ?>
                </p>    
            </a>
        </div>
    </div>
    <label for="" class="separator"></label>
    <div class="centerpost postarea">
        <p class="content">
            <?php echo $ROW['post'] ?>
        </p>
    </div>
    <label for="" class="separator"></label>
    <div class="bottompost postarea">
        <a href=""><i class="uil uil-thumbs-up"></i>&nbsp;&nbsp;Like</a>
        <a href=""><i class="uil uil-comment-alt"></i>&nbsp;&nbsp;Comment</a>
    </div>
</div>
</div>

The output of this code will be: Overlapping output

Answer 1

将溢出隐藏添加到包装盒