前言
超过几行显示省略号，在前端开发中，不止遇到一次这样的需求，但是每次想实现的时候，都会打开百度，然后输入"超过几行就显示省略号"，然后打开某个网址，复制粘贴即可，就这样，几次下来，我也没有记住到底是怎么实现的，在今天的开发中，我又遇到了这种需求，为了以后抛弃百度，所以我决定把它深入的研究一下，看看它到底是怎么实现的
超过一行就显示省略号(可以兼容任意浏览器)
其实这个的话还是比较好实现的，废话不多说，先上css，然后一句句的解释
white-space: nowrap // 主要是用于控制不换行
text-overflow: ellipsis; // 超出父元素大小后显示省略号
overflow: hidden; // 超出父元素部分隐藏
word-break: break-all;// 这个属性怎样在单词内断行。其值表示可以在任意行换行
超过两行就显示省略号(兼容部分浏览器)
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;// 设置为弹性盒？(后续会专门写一篇文章介绍)有兼容性问题
-webkit-line-clamp: 2;// 在一个块元素内显示的文本行数
line-clamp: 2;
-webkit-box-orient: vertical;
line-clamp依赖的属性:
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
- text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
目前多行显示省略号，还是不能兼容所有的浏览器的，如果你是谷歌，那么你就可以使用了，但是如果是ie还是放弃吧，不知道小伙伴们有没有好的解决方案，欢迎前来讨论
