专栏首页一只想做全栈的猫【前端芝士树】纯CSS实现多行文本溢出显示省略号

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Rxjs】Rxjs_Subject 及其衍生类

    在 RxJS 中,Observable 有一些特殊的类,在消息通信中使用比较频繁,下面主要介绍较常用的几个类:

    CloudCat
  • 【Angular】Angular 与 AngularJs 之间的纠缠不清

    Marketing/Branding 部分其实只是单纯的设定,不需要逻辑,所以记住就好。

    CloudCat
  • 【Angular6+】事件绑定

    添加如下 onSelect() 方法,它会把模板中被点击的英雄赋值给组件的 selectedHero 属性。

    CloudCat
  • Linux之free命令

    free命令可以显示Linux系统中空闲的、已用的物理内存及swap内存,及被内核使用的buffer。在Linux系统监控的工具中,free命令是最经常使用的命...

    剑行者
  • Java的克隆

    说到克隆,本质都是使用一个已经实例化完成的对象的副本。 对于基本类型比较简单。比方说我们想复制一个变量,

    PhoenixZheng
  • volatile原理

    当读一个volatile变量时,JMM会把该线程对应的本地内存置为无效。线程接下来将从主内存中读取共享变量(注意不仅仅是一个volatile变量,是所有共享变量...

    海向
  • Web漏洞 | 文件解析漏洞

    文件解析漏洞主要由于网站管理员操作不当或者 Web 服务器自身的漏洞,导致一些特殊文件被 IIS、apache、nginx 或其他 Web服务器在某种情况下解释...

    天钧
  • 首页快照不更新么?投诉试试吧!

    过年在家由于网络问题,半个月都没顾得上博客,回来后又是换空间,又是修改网站名称以及描述等内容,导致百度快照一直停在了 2014-01-23 ,硬是保持了一个多月...

    张戈
  • python之购物车程序

    题目: 购物车程序 业需求: 数据结构: goods = [ {"name": "电脑", "price": 1999}, {"name": "鼠标", "pr...

    用户2398817
  • C与C++中的二等公民

    在原来的C语言中,enum、const、auto等关键字都不尽完善,并没有发挥应有的功能,是二等公民,而随着时间的推移,在C++中他们都被完善了,有些还被赋予了...

    用户2617681

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动