纯CSS让文字行数限制超出显示省略号

直接用CSS来控制文字或字符的整行，比如先在父级控制一个绝对高度和宽度的框，然后用下面的CSS来控制一段文字行数，超出则显示省略号…

方法1：单行情况下，规定长度，超出部分显示省略号

.Xulgr{
	width: 100px;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;/*不换行*/
	text-overflow: ellipsis;/*超出省略号*/
}

方法2：多行情况下，规定只显示多少行，超出显示省略号。

.Xulgr{
	display: -webkit-box;
	overflow: hidden;
	word-break: break-all;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;  /*只显示4行*/
}

注意：方法2因-webkit-line-clamp已经规定了行数，如果加上高度height会导致webkit-line-clamp失效。