CSS文本超出后隐藏并显示省略号及其他浏览器兼容方案(推荐)

// 只显示一行文字后省略
.element {
	width: 300px;               /* 需要设置一个固定宽度 */
	white-space: nowrap;        /* 强制单行显示，不换行 */
	overflow: hidden;           /* 超出盒子部分隐藏 */
	text-overflow: ellipsis;    /* 超出部分显示省略号 */
}

// 显示多行文字后省略
.element {
  	width: 300px;               	/* 需要设置一个固定宽度 */
  	display: -webkit-box;        	/* 使用弹性盒布局 */
  	-webkit-box-orient: vertical; 	/* 垂直排列 */
  	-webkit-line-clamp: 3;        	/* 显示三行 */
  	overflow: hidden;             	/* 超出盒子部分隐藏 */
  	text-overflow: ellipsis;      	/* 超出部分显示省略号 */
}

//单行
$clamp(myHeader, {clamp: 1});
//多行
$clamp(myHeader, {clamp: 3});
//根据可用高度自动计算行数
$clamp(myParagraph, {clamp: 'auto'});
//根据固定高度自动计算行数
$clamp(myParagraph, {clamp: '35px'});

.element {
  	display: block;              /* 显示为块 */
  	overflow: hidden;            /* 隐藏超出内容 */
  	text-overflow: ellipsis;     /* 超出部分显示省略号 */
  	line-height: 1.5em;          /* 设置行高 */
  	max-height: 4.5em;           /* 3行的最大高度，3行 * 1.5行高 = 4.5em */
  	white-space: normal;         /* 保持正常的文本换行 */
}