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

多行文本溢出解决方案

时间:2015-10-14 01:35:59      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:

前言:

在最近的项目中遇到了多行文本需要进行省略号的设置,由此写下这边博客来记录下。

扩展:前面提到了多行也就来讲讲单行文本的省略号

单行省略:text-overflow:ellipsis; w3c官网上说都支持了;所以就提下,关于之前的opera,Firefox不支持的情况在2012年也都支持了;所以可以放心使用了。

具体代码如下

.box{width:200px; white-space:nowrap; text-overflow:ellipsis;overflow:hidden;}

 

1.如果完全不考虑兼容性进行多行文本省略号的话可以在现代浏览器,例如webkit内核的浏览器,或者移动端,是可以实现多行文本内容超出的, 最后一行显示的,典型的CSS组合如下:

.box{width: 500px; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
-webkit-line-clamp这个就是控制行数的,3就是3;

参考网址:http://www.css88.com/webkit/-webkit-line-clamp/

2.使用JavaScript插件来达到目的

1.Clamp.js

下载及文档地址:https://github.com/josephschmitt/Clamp.js
2.jQuery插件-jQuery.dotdotdot
下载及文档地址:https://github.com/BeSite/jQuery.dotdotdot

另外至于有人提倡使用伪类来模拟我就不说了。。。。可以参考
http://www.css88.com/archives/5206

 

 



多行文本溢出解决方案

标签:

原文地址:http://www.cnblogs.com/wxwdavid/p/4876261.html

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