博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
超出文本截取替换为省略号
阅读量:6542 次
发布时间:2019-06-24

本文共 451 字,大约阅读时间需要 1 分钟。

今天做了一个如下图的模块

其中,标题以及介绍这两块都需要做超出某个宽度就截取一行或两行文字,后面用省略号代替。

由于是做的手机页面,用JS来开销太大,只能从CSS入手。

一行的很好解决。

如下就OK了。

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

多行的想了很久,比如,写定行高,超出隐藏,弄个省略号作为补丁打在尾部。但是有个问题,页面宽度不固定,可能会出现只遮住一半字的情况,看起来很Low。

继续查找资料,CSSV5啊!

-webkit-line-clamp属性可以控制截取文本行数

overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;

  

 

转载于:https://www.cnblogs.com/invincible-hehe/p/3817153.html

你可能感兴趣的文章
2011/7/3 第二次评审
查看>>
Openvswitch手册(2): OpenFlow Controller
查看>>
tar解压
查看>>
inheritprototype原型继承封装及综合继承最简实例
查看>>
【磁耦隔离接口转换器】系列产品选型指南
查看>>
Apriori 关联算法学习
查看>>
二叉树、红黑树、伸展树、B树、B+树
查看>>
Junit核心——测试集(TestSuite)
查看>>
MVPArms官方首发一键生成组件化,体验纯傻瓜式组件化开发
查看>>
Log4j_学习_00_资源帖
查看>>
制作iso镜像U盘自动化安装linux系统
查看>>
JSLint的使用
查看>>
命令行常用命令--软连接
查看>>
HTTP POST GET 本质区别详解
查看>>
OC继承专题
查看>>
PHP中HASH函数的优化技巧
查看>>
MD5加密
查看>>
RSA算法实例
查看>>
ant
查看>>
微信,想要说爱你,却没有那么容易!
查看>>