【前端芝士树】纯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;
参考文献
《Ask not to remove the code: -webkit-box-orient · Issue #1141 · postcss/autoprefixer》