超出隐藏代码:
/*文字超出两行省略*/
.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>