即使"white-space: normal"文本重叠

Question

我有一个问题，这里的文本重叠，即使父div有white-space: normal。

下面是我的代码:

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>

这段代码的输出将是:重叠的输出

Answer 1

添加溢出隐藏到包装盒