前军教程网

一，div内显示一行，超出部分用省略号显示

.box {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

二，div内显示两行，超出部分用省略号显示

.box {
	display: -webkit-box;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

总结

-webkit-line-clamp 可以把块容器中的内容限制为指定的行数。 它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果。

-webkit-box-orient 设置块容器是否应按水平或垂直排列