web前端超出两行用省略号表示的实现方法


            web前端超出两行用省略号表示的实现方法

HTML





<span class="GW_bod0112211">

 吐鲁番特级无炳黑加仑葡萄干500g包邮无籽吐鲁番特级无炳黑加仑葡萄干500g包邮无籽吐鲁番特级无炳黑加仑葡萄干500g包邮无籽，超大孕妇零食

</span>





CSS





span{

  height: 40px;

  line-height: 20px;

  width: 300px;

  display: -webkit-box;

  -webkit-line-clamp:2;

  -webkit-box-orient: vertical;

  text-overflow: ellipsis;

  overflow: hidden;

}





 这个属性应用在移动端兼容性比较好。

效果如下：



如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！