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>