css多行省略和单行省略
2024-10-07 21:47:22
实现文本省略:
<!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往。朱自清当时虽置身在污浊黑暗的旧中国,但他的心灵世界则是一片澄澈明净,他的精神依然昂奋向上。朱自清把他健康高尚的审美情趣,把他对美好事物的无限热爱,将他对人生理想的不懈追求熔铸到文章中去。熔铸到诗一样美丽的语言中去。从而使整篇文章洋溢着浓浓的诗意,产生了经久不衰的艺术魅力<p> /*css代码*/
/*单行*/
.single{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
} /*多行*/
.single{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
flex-direction: column;
}
注意:如果想实现三行省略可以修改属性 -webkit-line-clamp:3
实现效效果:
最新文章
- mysql 5.7.15 vs mysql 5.6.31性能测试以及不同linux内核性能比较
- {转}Unity3d+Jenkins 自动编译iOS、Android版本(U3D远程自动打包工具)
- eclipse中本地项目怎么和svn中的项目关联?
- await, anync
- @font-face 使用过程
- 1013团队Beta冲刺日志集合帖
- MySQL5.7.17解压版安装
- 高阶组件 HOC
- u3d常用代码小集合
- Gym 101194E / UVALive 7901 - Ice Cream Tower - [数学+long double][2016 EC-Final Problem E]
- Python -- tabulate 模块,
- Spring Boot Admin 日志查看功能
- 删除新版UniAccess Agent 办公室监控软件的方法
- Python cmd中输入&#39;pip&#39; 不是内部或外部命令,也不是可运行的程序或批处理文件。
- JS base64加解密解决传输的url各种编码问题
- SQL 变量 条件查询 插入数据
- [转].net reactor 学习系列(四)---.net reactor应用场景
- 虚拟机 Ubuntu18.04 tensorflow cpu 版本
- C# Log4.Net日志组件的应用系列(二)
- 搞定thrift双向消息
热门文章
- 转:handler.post 为什么要将thread对象post到handler中执行呢?
- Qt 用户通过对话框选择文件
- 设计数据库 ER 图太麻烦?不妨试试这两款工具,自动生成数据库 ER 图!!!
- java 中的fork join框架
- history of program atan2(y,x)和pow(x,y)
- linux下报错:error while loading shared libraries
- 监控之--Nagios如何监控本地主机及本地服务
- 瑞幸咖啡还是星巴克,一杯下午茶让我明白 设计模式--模板方法模式(Template Method Pattern)
- 图论--差分约束--POJ 1364 King
- 基于UDP的客户端和服务器端的代码设计