#CSS 文本溢出部分显示省略号
2024-10-02 04:07:18
单行结尾溢出:
用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览。 width:300px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如图:
--------------------------------------------------------------
多行结尾溢出:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
效果如图:
适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
- -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: 0; right: 0; 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。
最新文章
- JS function document.onclick(){}报错Syntax error on token ";function";, delete this token
- hdu 1394 Minimum Inversion Number(树状数组)
- Logistic Regression分类器
- [ZOJ 3839] Poker Face (递归)
- 用javascript获取屏幕高度和宽度等信息
- 关于Delphi中二维数组的声明和大小调整(对非基本类型数据,小心内存泄漏)
- oracle database 12c R1 安装文档
- 在JS中使用COM组件的方法
- Android之SharedPreferences内部原理浅析
- Pagedown learning notes
- UVa11988 Broken Keyboard 损坏的键盘【list】
- c++ :
- C# DataTable使用方法详解--删除表数据
- mysql 设置用户并授权
- Java生成唯一ID
- go语言基础之常量
- vue 的 生命周期
- Unix系统编程(三)通用的I/O
- linux 下安装svn服务
- pyhton3 random模块
热门文章
- ORM choice字段 如何在页面上显示值
- bzoj千题计划146:bzoj3295: [Cqoi2011]动态逆序对
- Mongodb开启远程连接并认证
- 《设计模式》-原则五:合成/聚合复用原则(CARP)
- [转载]教你如何塑造JavaScript牛逼形象
- 用JS获得QQ号码的昵称,头像,生日
- Postgresql数据库安装中文全文搜索插件zhparser的问题
- 【leetcode 简单】 第八十九题 赎金信
- C#反射-Assembly.Load、LoadFrom与LoadFile
- SQL Server 2000事务复制问题