css实现最后一行显示省略号（兼容火狐ie8以上）

日常我们经常会遇到一段文本，定宽高，超出显示省略号，一行好说，这里就不介绍了。那么假如我有多行文本，最后一行显示省略号怎么办？于是网上搜索，找到了解决办法。

1.使用谷歌自带私有属性来兼容谷歌浏览器。

//html
 

    数据风控圣诞快乐附件上看到积分看了是点击开发了结束掉开了房数据风控圣诞快乐附件上看到积分看了是点击开发了结束掉开了房


//css
 p {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid #333;
    display:-webkit-box;   
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; //数字表示第2行显示省略号。
}

注：

1. 最后三个属性都添加上才会生效
2. 必须添加-webkit-前缀，否则谷歌浏览器不识别。
3. 此方法只兼容谷歌，360（因为360的渲染进程（内核）用的是谷歌内核），火狐ie等浏览器不兼容

1525335809(1).jpg

那么问题又来了，上面方法既然只能用于谷歌浏览器，所以一般内部系统要求只兼容谷歌的可以使用。那么外部系统怎么办，ie火狐都需要兼容啊。

2. 使用伪元素

//html
 

    数据风控圣诞快乐附件上看到积分看了是点击开发了结束掉开了房数据风控圣诞快乐附件上看到积分看了是点击开发了结束掉开了房


//css
 p {
    width: 100px;
    height: 100px;
    position: relative;
    line-height: 20px;
    overflow: hidden;
    border: 1px solid #333;
}

p:after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    color: #333;
    background: #fff;
}

原理其实就是使用伪元素定位到最后一行，然后背景色为文本框的背景色盖住即可。

注：

1. 此方法一般用于定位最后一行。不像第一种方法，定位到任意行都可以，只用改变 -webkit-line-clamp值即可。

但是，又有个问题，在ie8下，发现content的内容跟透明一样，无法盖住下面的文字，为了看清楚，我把伪元素的背景色，改成红色，文字改成白色。（尝试加z-index也不行）

1525337000(1).jpg

3.使用自定义标签
由于公司项目大部分都不用兼容ie8,就没有花费时间去网上搜索解决办法，所以如果需要兼容ie8,可以不用伪元素，将省略号放到一个标签内即可。

//html
 

    
        ...
    
    数据风控圣诞快乐附件上看到积分看了是点击开发了结束掉开了房数据风控圣诞快乐附件上看到积分看了是点击开发了结束掉开了房


//css
  p {
    width: 100px;
    height: 100px;
    position: relative;
    line-height: 20px;
    overflow: hidden;
    border: 1px solid #333;
}

span{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    color: #333;
    background: #fff;
}

其实原理和使用伪元素一样。

注：但使用伪元素或标签定位只使用于已经确定内容是多行的情况，假如文字是不固定的，就会出现文字过少省略号还在最后一行的位置上，所以这种方法并不实用。

所以最好的办法还是第一种，火狐等浏览器不兼容就隐藏。不过这还需要看产品的想法了ε=(´ο｀*)))。
网上也有通过js来实现的，本文不介绍，感觉为了一个省略号多加载一段js，有点大材小用了。有需要的可以百度那些js.