CSS 实现单、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现方法:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如图:
但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号,如下。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
效果如图:
注:
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
- display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式
实现方法:
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom:; right:; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
效果如图:
适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注:
- 将height设置为line-height的整数倍,防止超出的文字露出。
- 给p::after添加渐变背景可避免文字只显示一半。
- 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。
CSS 实现单、多行文本溢出显示省略号(…)的更多相关文章
- CSS单行、多行文本溢出显示省略号(……)
这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS单行、多行文本溢出显示省略号(……)解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
- css 单行和多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- css多行文本溢出显示省略号(…)
text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(…).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...
随机推荐
- nodejs笔记之初识node
1.安装node; node -v //检测node是否安装成功 node可以做什么: 搭建服务器: 读写文件: 连接数据库: 爬虫: node的模块系统: 原生模块(如http,fs); 自定义模 ...
- 在数据库级别还是在service层进行级联删除
在数据库配置级联删除的话,父表删除子表也删除.但是应该将维护代码放在一处,不要在service上删除父表,而在数据库层面级联删除子表,应该都在service层上进行删除.
- POJ 1390 Blocks(DP + 思维)题解
题意:有一排颜色的球,每次选择一个球消去,那么这个球所在的同颜色的整段都消去(和消消乐同理),若消去k个,那么得分k*k,问你消完所有球最大得分 思路:显然这里我们直接用二位数组设区间DP行不通,我们 ...
- 20175312 2018-2019-2 《Java程序设计》第2周学习总结
20175312 2018-2019-2 <Java程序设计>第2周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第二.三章的学习,主要的学习渠道是视频,和书的课后习题. 总结如 ...
- js没有函数重载
上面这道题,要求判断输出的y和z分别为什么 一开始,我选择了2,4 后来发现答案是4,4 意识到js中没有函数重载!!!即使声明了两个同名函数,结果也是后面的函数覆盖了前一个函数. 而且函数声明会提升 ...
- 使用C#控制台应用程序完成一个2048小游戏
曾经使用C#控制台应用程序写的一个2048,现在翻出来回顾一下 Box类是2048中每一个小格子的相关信息,包括格子的横纵坐标.格子的值和格子是否刚合并这些信息. Grid类是网格的相关信息,包括网格 ...
- ubantu下git的连接和使用
目录 操作命令 创建仓库,并提交一个readme文件. 文件改动怎么办 版本回退 版本库(Repository) 撤销修改 删除文件 远程仓库 添加远程库 本地有一个仓库,想要在GitHub上同步这个 ...
- hdoj4871
5 4 21 2 12 3 23 4 34 5 2
- android -------- Retrofit + RxJava2.0 + Kotlin + MVP 开发的 WanAndroid 项目
简介 wanandroid项目基于 Retrofit + RxJava2.0 + Kotlin + MVP 用到的依赖 implementation 'io.reactivex.rxjava2:rxj ...
- laravel框架中的邮箱发送
1.设置邮件服务器登录 163邮箱设置 POP3/SMTP/IMAP勾选:POP3/SMTP服务 IMAP/SMTP服务 保存 设置客户端授权密码 2.在laravel中配置服务器 打开.env文件 ...