【前端芝士树】纯CSS实现多行文本溢出显示省略号

【前端芝士树】纯CSS实现多行文本溢出显示省略号

使用-webkit-line-clamp来控制行数

由于-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，为了实现该效果，它需要组合其他外来的 WebKit 属性。

overflow: hidden;
text-overflow: ellipsis; //文本溢出时，用省略号“…”隐藏超出范围的文本。
display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式

-webkit-line-clamp: 2; //控制文本的行数

该段样式在 vue 或者 angular 项目中会失效，因为代码构建过程中使用了 autoprefixer

-webkit-box-orient 是过时的 flexbox 语法，现在它已经转化为了 flex-direction。 人们对 Autoprefixer 感到恼火的原因是因为 Autoprefixer 破坏了 line-clamp 的使用， 并且这个问题已经存在了很长一段时间。 但是，使用旧的过时的 flexbox 语法是 line-clamp 在任何-webkit-浏览器中处理多行溢出的唯一纯 CSS 方法。

Autoprefixer 作者的意见如下

是的，我知道 line-claimp 这个属性。我个人不喜欢 webkite-only 的事情。所以我不想花费我的时间而允许人们去做这个事情（但是可以通过/* autoprefixer: ignore next */或者/* autoprefixer: off */ 让 autoprefixer去忽略这个属性的检查）。 但如果有人解决 webkit-only 的问题，我会去 fix 这个属性的检查。

所以最后的开发代码如下：

/* autoprefixer: off */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

参考文献 《多行文本溢出显示省略号(…)全攻略-WEB前端开发》 《Ask not to remove the code: -webkit-box-orient · Issue #1141 · postcss/autoprefixer》