首页 > 代码库 > 超出文本截取替换为省略号
超出文本截取替换为省略号
今天做了一个如下图的模块
其中,标题以及介绍这两块都需要做超出某个宽度就截取一行或两行文字,后面用省略号代替。
由于是做的手机页面,用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;
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。