Css 在容器上使用overflow:auto来包含文本的长段落

我有一个满是10px填充物的容器。它上面有一个设置的高度和溢出：auto，以便包含长达1000个字符的“description”

这里是它看起来像没有溢出

这里有一个溢出：容器上的auto

这将添加一个滚动条，这是所需的效果。但是，尽管容器底部有10px的填充，但文本仍会一直延伸到容器边缘的最底部，这表明溢出时没有考虑填充。我试着添加更多的填充物，但正如预期的那样，没有任何区别

这是HTML

<div class="journix-info-inner input-container shadow-bottom">
        <div class="info-header">
                <h2 class="journix-title">
                         <?php echo $row['title']; ?>
                </h2>
                <h3 class="journix-user">
                         by <?php echo $row['user_id']; ?>
                </h3>
         </div>
         <p class="info-content">
                <?php echo $row['description']; ?>
         </p>
</div>

此屏幕截图显示了填充以及文本如何与填充的底部10px重叠

您可以尝试包含属性以将填充和边框约束到元素的宽度和高度

.test {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

---

我的建议是设置一个or

---

如果您选择将标题/副标题保留在此嵌套元素之外，则此方法的另一个好处是在滚动时保留标题和副标题：-）

请在问题中发布代码片段或小提琴。您的意思是要将填充应用于框边界吗，在填充的位置剪切溢出？是的，请参见上面的屏幕截图，您可以看到文本剪辑到底部填充的10px。这很奇怪。这一点也不奇怪——填充是为了应用到内容边缘之外。如果内容溢出，则填充也必须如此（除非

overflow

设置为

visible

）。我已经尝试过了，但正文文本周围的新包含元素仍然扩展到整个容器之外。啊，我忘了提一下，还需要将高度移动到新的嵌套元素中。我们应该这样做。请查看：。如果您喜欢div，只需分别替换article和section元素。无论哪种方式，您都可能希望添加类并以这种方式识别它们。非常感谢，不幸的是，在文本上设置特定高度似乎是实现我所希望的唯一方法。您的意思是您希望它的最大值为360px高，但如果文章较短，请缩小比例？如果是这样，您可以将高度替换为最大高度，如下所示：。事实上，这一次我玩得很开心，所以让我知道。设置最大高度是完美的。谢谢

.test {
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.description {
    max-height: 360px;
    overflow: auto;
    margin: 10px;
}