【前端芝士树】纯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》

    原文作者:云中的猫
    原文地址: https://segmentfault.com/a/1190000017326859
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞