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

css定义

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

属性说明

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

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

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

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

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

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

项目是使用less

会发现但在less中添加这些时并没有生效，依然是显示多行

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