控制文本超过N行后加上省略号隐藏

单行文本隐藏

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

多行文本隐藏

.multiple-line-text {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 这是两行，多少行自己换个数字就是了 */
}

问题

-webkit-box-orient: vertical可能会在webpack打包后消失掉导致出现问题，解决方案如下：

普通css：

/* autoprefixer: off*/
-webkit-box-orient: vertical;
/* autoprefixer: on*/

less：

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */