通过css实现div中文本内容显示N行，超过部分用省略号显示

一、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