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

Question

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

尽管最大高度设置为最多 6 行 + 填充，但存储在框 (div) 内的文本（跨度）绘制下一行。

如此处所示：

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

            <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

设置显式 line-height 似乎对我有用：

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

line-height: 20px;

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

Answer 2

对于将来遇到或将来遇到此问题的其他所有人 - 在页脚和标题上添加填充，它不会像您希望的那样整洁 - 但它会摆脱烦人的 'draw over text' 事情。

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

Text ignores bottom padding, draws next line regardless

css

text

overflow

padding