css 文字超出范围，显示省略号....

1，首先来一个固定宽度，在一行显示，超出隐藏，显示省略号的样式

display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

2，其实来一个可以设置让它显示多少行后再显示省略号，这只能用私有属性解决了

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;/*重点，不能用block等其他*/
-webkit-line-clamp: 2;/*重点IE和火狐不支持*/
-webkit-box-orient: vertical;/*重点*/

因为 -webkit-line-clamp: 2  是webkit的私有属性，其他浏览器不可以用。所以在网上找了一下，有个插件还是很好用的，完美的实现了这个属性。

还可以配置很多属性，比如 是否动画展开，不一定要显示省略号，可以显示其他符号，是否启用 -webkit-line-clamp:  这个属性等等；

下载地址 https://github.com/josephschmitt/Clamp.js

<script src="../clamp.js"></script>

//调用方法：$clamp(dom,options); dom是节点，options是配置项

用这个插件需要注意一下事项：

我在用这个插件的时候，IE和火狐下面形态各异，火狐在第二行还没到第二行的末尾处（甚至还有很宽的距离）就显示省略号了。IE有时候也出现。

查看了一下源码发现 这个和指定不指定line-height有关系，因为源码中会获取line-height获取高度 来判断显示省略号的；

参考:https://www.cnblogs.com/yclblog/p/6689745.html