前言:
在最近的项目中遇到了多行文本需要进行省略号的设置,由此写下这边博客来记录下。
扩展:前面提到了多行也就来讲讲单行文本的省略号
单行省略: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; 参考网址: 2.使用JavaScript插件来达到目的 1.Clamp.js 下载及文档地址:2.jQuery插件-jQuery.dotdotdot 下载及文档地址: 另外至于有人提倡使用伪类来模拟我就不说了。。。。可以参考