深入理解行间距

每次做项目时被ui的1px像素弄的死去活来,如何精确并快速的设置行间距呢？
情况一：只有汉字时直接设置行间距（line-height）为字体大小，设置个padding-top就可以解决行间距了
情况二： 既有汉字又有英文字母和数字时，这种方法就不顶用了，就会出现如下情况，字母j和g竟然被截断了，

6B23FAC6-EF98-4c98-B3EC-FA090BC6B9BA.png

.title{
    padding-top:10px;
    line-height:18px;
    font-size:18px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

那我们要怎样计算行间距呢？

公式：行间距 = 行高 - 字体大小。

.title{
    line-height:28px;
    font-size:18px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

这种方法既精确又不会截断英文字母