多行文本溢出解决方案

标签：

前言：

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

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

单行省略：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