CSS 文本的单行和多行溢出省略

单行

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

多行省略

按照行数省略

/* 按照行数省略-兼容性较差 */
p {
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2; /* 行数 */
	-webkit-box-orient: vertical;
}

按高度省略

/* 按高度省略-不带省略号，需要手动添加省略号 */
p {
	position: relative;
	max-height: 40px;
	overflow: hidden;
	line-height: 20px;
}
/* 手动添加省略号 */
p::after {
	content: '...';
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 20px 0 10px;
}