前言
目前我们项目使用的都是自定义字体，设计图上看，高度、行高和实际情况都是有一些出入的，以及一些文本在不同系统上的真实宽度（像素）也存在偏差。就会导致比如本身不换行的文本换行了，有的字体在页面上存在垂直方向上的偏移，这些问题处理起来十分麻烦。
问题
这里要求文本是超出2行隐藏+省略，行高也是确定的19px，那这里就存在问题了，如果加了overflow: hidden;，单行情况会切割字体部分（因为字体默认向下偏移了），如果不加的话，又不能多行隐藏。而且无标签元素又没办法通过vertical-align去处理，这个问题属实棘手。
实际效果和样式如下图：
解决方案
这里就需要理解字体在行内的默认渲染逻辑了：默认一行内，字体在行内是默认居中去显示的，然而使用的字体存在实际垂直方向上的偏移，所以就需要调整行高，然后整体做一定反方向的偏移，这样可以达到设计图的效果，并且多行也是没有问题的，目前来看，这是最完美的做法。
调整代码
position: relative;
top: -4px;
line-height: 23px;
font-size: 19px;
font-family: Verdana;
font-weight: bold;
color: #000000;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
效果
结束语
码字不易，觉得有用的，请点个赞，谢谢！
