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