css - 文本忽略底部填充，无论如何绘制下一行

Question

显然，我的帖子页面决定自行其是，拒绝按应有的方式工作。

存储在框 (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>

和 CSS:

.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;
}

https://jsfiddle.net/2rm969es/

Answer 1

设置明确的行高似乎对我有用:

http://codepen.io/anon/pen/dNjxRW

line-height: 20px;

您是否尝试让 10px 的内边距也出现在页脚上方？