Css 文本忽略底部填充，不管如何绘制下一行

很明显，我的帖子页面决定自己想一想，并拒绝按它应该的方式工作

存储在框（div）中的文本（span）绘制下一行，尽管最大高度设置为最多6行+填充

如图所示：

所以，显然我没有任何解决方案，下面是代码：

            <div class = "post">
                <div class = "post-title">Lorem ipsum dolor amet</div>
                <div class = "post-content"><span>Lorem Ipsum</span></div>
                <div class = "post-footer"><span class = "post-date">2017.02.07</span><span class = "post-author">- J.</span></div>
            </div>

---

设置明确的线条高度似乎对我很有用：

---

你想让10像素的填充也出现在页脚上方吗？

对于其他任何有或将来会有此问题的人-在页脚和标题上添加填充，它不会像你希望的那样整洁-但它会摆脱烦人的“画图覆盖文本”的事情。

你能提供一个JSFIDLE吗？看起来像

。post footer

的位置是绝对的并隐藏了您的内容。不，填充设置在span内，意味着位于边界的顶部和底部。您可能需要在页脚中包含较低的填充，因为span中的填充不会隐藏将在填充区域中显示的内容。

.post-content
{
    max-height: 128px;
    overflow: hidden;
    color: rgb( 81, 85, 88 );
}

.post-content span
{
    overflow: hidden;
    font-size: 15px;
    display: inline-block;
    padding: 10px 0px;
}

line-height: 20px;