css之多行文本溢出设置问题

首先我们看下单行文本溢出的设置方法

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

这个比较通用。

下面着重说下多行文本溢出的设置。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

设置完成后有个问题，显示如下

 

 看有文字多出来了，这里的问题是由于容器宽度和line-height的值不是整数倍的关系。
这里需要特别注意，需要将line-height的值设置为宽度的整数倍。

我这里将width设置为36px，line-height设置为18px;
看下效果

 

 
问题解决啦~

吐槽：第一次碰见检查样式用尺子量尺寸的sb产品。太较真儿真的好吗？无语~~~