CSS文本溢出截断省略

原本的样式：

<div class="test-text">
	<div class="text-content">this is a test, this is a test, this is a text.</div>
</div>

.test-text {
    width: 130px;
    background: aliceblue;
    margin: 200px;
}

图示：

单行文本溢出：

.text-content {
	// 文字长度超出限定宽度，则隐藏超出的内容
	overflow: hidden;
	// 设置文字在一行显示，不能换行
	white-space: nowrap;
	// 当文本溢出时，显示省略符号来代表被截断的文本
	text-overflow: ellipsis;
}

图示：

多行文本溢出省略：

.text-content {
	// 用来限制在一个块元素显示的文本的行数，2表示最多显示2行。为了实现该效果，它需要组合其他的WebKit属性
	-webkit-line-clamp: 2;
	// 和1结合使用，将对象作为弹性伸缩盒子模型显示 
	display: -webkit-box;
	// 和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
	-webkit-box-orient: vertical;
	// 文本溢出限定的宽度就隐藏内容
	overflow: hidden;
	// 多行文本的情况下，用省略号“…”隐藏溢出范围的文本
	text-overflow: ellipsis;
}

图示：