純 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; 使一個單詞可以在換行時進行拆分，這樣文字和省略號貼合效果更佳。