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

时间:2021-03-29 wei hang 人气:0

想了解web前端超出两行用省略号表示的实现方法的相关内容吗，wei hang在本文为您仔细讲解web 省略号的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：web前端超出两行用省略号表示,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;
}

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

效果如下：

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

加载全部内容