使用css设置超出盒子宽度时显示省略号

1、单行

单行比较常见，不赘述。

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

2、多行

多行文本相对来说不太好处理，因为没有专门的css属性支持。不考虑兼容性可以通过-webkit-line-clamp模拟，它的功能是可以设置块级盒子里面最多能够显示的行数，如果超出则会在最后一行显示省略号。这个属性需要配合其他属性使用。

.show-mul-ellipsis {
	display: -webkit-box; /* 或者是 -webkit-inline-box */
	overflow: hidden;
	-webkit-line-clamp: 4; /* 能够显示的最大行数 */
	-webkit-box-orient: vertical; /* 将盒子排列方向设置为纵向 */
}

注意：由于-wetkit-line-clamp只是控制在超出行数时显示省略号，因此超出文本仍然会显示，所以必须添加 overflow: hidden;
如下：

<div class="collapse">
	多年以后，奥雷连诺上校站在行刑队面前，准会想起父亲带他去参观冰块的那个遥远的下午。当时，马孔多是个二十户人家的村庄，一座座土房都盖在河岸上，河水清澈，沿着遍布石头的河床流去，河里的石头光滑、洁白，活象史前的巨蛋。
</div>

.collapse {
	display: -webkit-inline-box;
	width: 200px;
	height: 200px;
	padding: 10px;
	border: 1px solid #ccc;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

效果如下：

可以发现省略号虽然有，但是超出的文字还在，因此必须使用overflow: hidden;
-webkit-line-clamp的兼容性如下：

其实兼容性还好，除了IE以外基本都能用。如果实在要兼容IE，那就只能使用定位硬生生手动造一个省略号了。
以上。

参考链接：
[1] MDN上关于-webkit-line-clamp的解释