CSS display: -webkit-box; 内容限制三行显示，其余用省略好... 显示

必须联合使用

1. overflow: hidden;

2. text-overflow: ellipsis;             文本溢出隐藏为省略号

3. display: -webkit-box;               定义为盒子显示

4. -webkit-box-orient: vertical;     定义为竖向编排显示

5. -webkit-line-clamp: 3;              限制一个块元素显示的文本行数

 

但是有一个问题 如果你的项目中装了 autoprefixer 管理浏览器前缀的插件的话  这个插件不仅能够帮你 加 -webkit- 之类的前缀 同时还会帮你删除在 less，css，sass 中的样式 。你会发现你在less文件中写的 -webkit-box-orient: vertical; 属性不见了 

关闭 autoprefixer 自动删除 

• /* autoprefixer: off */

• -webkit-box-orient: vertical;

• /* autoprefixer: on */

这样注释中间的 -webkit-box-orient 属性就不会被删除掉了