一、单行文本超出省略

单行文本是最常用到也是最简单的，我们只需给需要省略的盒子设置 overflow: hidden; text-overflow: ellipsis;三个属性即可。

<div class="box">这是一段很长很长的文本这是一段很长很长的文本</div>

.box{  width: 200px;  padding: 10px;  border: 1px solid #444;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

效果如下：

二、多行文本超出省略

多行文本现在也用到越来越多了，主要用到-webkit-line-clamp和-webkit-box-orient两个属性，基本上现代浏览器都支持。

<div class="box">这是一段很长很长很长的文本这是一段很长很长很长的文本这是一段很长很长很长的文本</div>

.box{  display: -webkit-box;  width: 200px;  line-height: 24px;  border: 1px solid #444;  max-height: 72px;  overflow: hidden;  text-overflow: ellipsis;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;}

效果如下：

我们是以三行为例的，其中-webkit-line-clamp属性的值就是来设置几行，同时也要注意max-height必须是设置行数乘以行高的值。