纯 CSS 实现多行文字截断

<div class="wrap">
	<div class ="text">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.
	</div>
</div>

.wrap {
	height: 40px;
	line-height: 20px;
	overflow: hidden;
}

.wrap .text {
	float: right;
	margin-left: -5px;
	width: 100%;
	word-break: break-all;
}

.wrap::before {
	float: left;
	width: 5px;
	content: '';
	height: 40px;
}

.wrap::after {
	float: right;
	content: "...";
	height: 20px;
	line-height: 20px;
	/* 为三个省略号的宽度 */
	width: 3em;
	/* 使盒子不占位置 */
	margin-left: -3em;
	/* 移动省略号位置 */
	position: relative;
	left: 100%;
	top: -20px;
	padding-right: 5px;
}

这里我目前看到最巧妙的方式了。只须要支持 CSS 2.1 的特性就能够了，它的优势有：

1. 兼容性好，对各大主流浏览器有好的支持。

2. 响应式截断，根据不一样宽度作出调整。

3. 文本超出范围才显示省略号，不然不显示省略号。

至于缺点，由于咱们是模拟省略号，因此显示位置有时候没办法刚恰好，因此能够考虑：

1. 加一个渐变效果，贴合文字，就像上述 demo 效果同样。

2. 添加 word-break:break-all; 使一个单词可以在换行时进行拆分，这样文字和省略号贴合效果更佳。