css 文本超出2行就隐藏并且显示省略号

1.css定义

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

2.属性说明

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。

3.-webkit-line-clamp超过两行就出现省略号

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

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。

4.项目是使用less的，会发现但在less中添加这些时并没有生效，依然是显示多行

-webkit-line-clamp: 2;在less中不生效

解决：需要创建一个.css文件存放，被引用

---

参考文件：

https://www.cnblogs.com/ldlx-mars/p/6972734.html

https://blog.csdn.net/lucky_bo/article/details/79665519