开发过程中我们可能会遇到这样的需求：
有一行文本，不足一行，全部显示，超出一行，行尾显示为省略号。
可能你会有些扫操作，用 JS 去动态的判断，尽管效果已经实现，但是看上去搓的一逼，配不上前端这个词。
下面给你介绍 两种 优雅的 方式 ，来实现这个效果。
HTML如下：
<div class="text-to">这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试</div>
1：一行，超出显示为省略号
.overflow-to-ellipsis{width: 200px;background: red;color: white;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
效果如图：
但是，某些时候，产品经理似乎总有改不完的需求和各式各样变态的需求。
比如，两行超出显示为省略号
再比如，三行超出显示为省略号
再比如......
2、多行，超出显示为省略号
备注：此方法兼容性不佳，safari 和 chrome 支持比较好，所以感觉在 移动端 比较好用吧
.text-to {background: red;color: white;-webkit-box-orient: vertical;-webkit-line-clamp: 3;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;}
效果如下：
修改 -webkit-line-clamp 的值，就可以控制行数。
