首页 > 编程 > JSP > 正文

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

2024-09-05 00:18:17
字体:
来源:转载
供稿:网友

随着网络的不断进步,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;}

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

效果如下:

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

上面是错新技术频道网为大家实现web前端超出两行用省略号表示的方法,大家可以将上文的内容作为参考。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表