ff文字省略号

写手机端页面的时候遇到，文字超过两行，多的文字需要省略。

css代码：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

写这些就好，由于手机端页面无兼容性；用FF的浏览器看到效果的时候，有很大的兼容问题。

百度了一下，发现有用after的写法，无任何兼容问题！服气~

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

例如：

p {

position:relative;

line-height:1.4em;

/* 3 times the line-height to show 3 lines */

height:4.2em;

overflow:hidden;

}

p::after {

content:"...";

font-weight:bold;

position:absolute;

bottom:0;

right:0;

padding:0 20px 1px 45px;

background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;

}

　　学习了