摘要：
限制块元素中显示的文本行数。要实现此效果，它需要组合其他外部WebKit属性-WebKit box orient必须与属性组合，以设置或检索扩展框对象的子元素的排列。在多行文本的情况下，文本溢出可用于使用省略号“…”隐藏超出范围的文本。
一、div内显示一行，超出部分用省略号显示
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
二、div内显示N行，超出部分用省略号显示
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;（希望显示N行-webkit-line-clamp的变为N） -webkit-box-orient: vertical;
注意：-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
但是在vue项目中，一启动项目就会发现多行文本隐藏失效了，打开控制台发现-webkit-box-orient: vertical; 这行代码没了，原因是在打包部署的时候此属性会被删掉，解决方法如下：
在 package.json 中修改 browserslist ：
"browserslist": [ "> 1%", "last 2 versions", "last 10 Chrome versions", "last 5 Firefox versions", "Safari >= 6", "ie > 8" ]
转自：
https://blog.csdn.net/zf18234031156/article/details/80972414
https://blog.csdn.net/kuguhuan/article/details/104865509