在处理前端的文本时候，我们可能需要对多余的文本进行省略显示。

前提保证：当前包裹文本dom元素要是块元素，其次要有固定的宽度。

-webkit-line-clamp  代表文本元素 想要显示的行数

-webkit-box-orient 表示指定子元素的排列方向，注意：这个属性在低版本浏览器编译的时候可能会丢失，推荐写法:

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

对于单行文本显示省略还是推荐使用：

接到一个需求：文本从接口动态获取后在页面只显示三行，超过三行显示省略号...，并且要显示一个 详情按钮，点击按钮查看所有文本内容。没超过三行不做处理。

初想：通过获取文本域宽度除以文本中文字的宽度去进行长度限制。做到一半发现进入误区，此方法并不能完美限制，而且很麻烦，文本如果又不同字符长度是不一样的。写代码我只要觉得写的很累很麻烦的时候我一定会放弃，代表方式以及思路错了。重新去查资料。

后续思考实践：通过获取文本域的dom节点的 clientHeight  (dom元素的可见高度)和 scrollHeigth （文本实际高度，即可见高度+隐藏高度）进行比较，如果 scrollHeigth大于clientHeight则代表内容超出已经显示...了。

到此及完美解决。

后续：如果考虑页面动态变化问题，那就要考虑监听页面变化实时去获取dom的高度变化重新去判断。