手机端多行文本结尾省略号方法

我们知道，单行文本结尾使用省略号的办法是：

<pre name="code" class="css">.box{
    text-overfolw: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

那么，我们不仅要两行，三行，甚至更多文本信息显示，同时要让超出范围的文本用省略号的方式该怎么办呢？

chrome提供了一个clamp的属性，当然，此属性目前仅限于在chrome下使用。但是，对于手机端网站来说，绝大多数都是基于chrome，所以使用这一属性就不成问题了。

方法如下：

.box{
	width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;      //控制几行几行结束位置显示省略号
	-webkit-box-orient: vertical;
}

</pre><pre name="code" class="css">效果如图所示：