多行省略异常

CSS超出两行隐藏，但是仍然有部分第三行文字溢出

/*文字超出两行省略*/
.two-row-hide {
  white-space: normal;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

原代码

<div class="di-name f-28 two-row-hide">{{item.name}}</div>

修改后

<div class="di-name flex-tb">
    <span class="f-28 two-row-hide">{{item.name}}</span>
</div>