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;
}

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

效果如下:

posted @ 2017-06-13 15:18  生如逆旅,一苇以航  阅读(1853)  评论(0编辑  收藏  举报