码迷,mamicode.com
首页 > 其他好文 > 详细

超出文本截取替换为省略号

时间:2014-07-01 13:12:09      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:blog   http   java   2014   javascript   问题   

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

bubuko.com,布布扣

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

由于是做的手机页面,用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;

  

 

超出文本截取替换为省略号,布布扣,bubuko.com

超出文本截取替换为省略号

标签:blog   http   java   2014   javascript   问题   

原文地址:http://www.cnblogs.com/invincible-hehe/p/3817153.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!