多行文本溢出 显示... 判断是否多行文本溢出
2015-11-26 15:56
246 查看
多行文本溢出后显示...下面只是其中一种纯css的解决办法,有一定的局限性,在于-webkit-line-clamp: 2这句语句,这句语句是webkit基于内核的一句语句,其他内核均无法使用。可是我专门列出来的原因是这个可以用于移动端,移动端暂时几乎都是基于webkit内核的浏览器,所以可以使用。
使用上述css代码即可实现多行文本溢出显示...的效果。
这里还配套写了一个判断是否多行文本溢出了的js。
首先要记得定死高度height,不能是auto,这是纯js的代码。这个是多行的,单行的直接把height变为width即可。
如果用jquery的话,要这么用,如下:
切记scrollHeight之前的dom元素之后要加[0],不然一定出bug。
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
使用上述css代码即可实现多行文本溢出显示...的效果。
这里还配套写了一个判断是否多行文本溢出了的js。
首先要记得定死高度height,不能是auto,这是纯js的代码。这个是多行的,单行的直接把height变为width即可。
div.scrollHeight==div.offsetHeight
如果用jquery的话,要这么用,如下:
div[0].scrollHeight ==div.height()
切记scrollHeight之前的dom元素之后要加[0],不然一定出bug。
相关文章推荐
- 【转】使用Spring Cloud和Docker构建微服务
- 能量函数在神经网络中的意义
- c++11条件变量的使用,condition_variable
- Ubuntu上安装rvm
- 第四节 控制LED
- 用instancetype代替id作返回类型有什么好处
- 知乎转载 小波变换
- 兔子-更改 Apache 默认网站根目录
- 使用HttpWebRequest发送自定义POST请求
- 移动互联网服务端相关问题
- Ubuntu远程连接报错:xrdp_mm_process_login_response: login failed
- 浏览器兼容处理
- centos7设置服务自启动
- Codeforces Round #302 (Div. 1) C
- DSP里动态内存分配malloc函数的使用
- Gorgeous Sequence
- iOS 学习日志:infoplist常用设置
- 【转】html5响应触控
- js实现placeholder效果
- 20151126001 网页中嵌入谷歌动态地图