CSS:超出部分省略号

首先，先让大家看下效果图。

1.不换行情况（第一张图代码）

首先，你要设置一个宽度。这样编译的时候才会知道超过多少会出现省略号，其次，加上这三行代码就OK了

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

2.多行情况（第二张图代码）

这里就不用设置宽度，但是是你要设置行数，但是注意：它不会超过父类的宽度。

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

但只兼容webkit内核浏览器以及移动端

如果想兼容其他浏览器（未考虑IE），可以通过伪类：：after实现，但也有小的bug。同时，由于IE6、7不能显示content内容，所以可以添加标签兼容IE6、7；兼容IE8以上需要将：：after替换成：after。

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

当文字不超出的时候，省略号也会出现。推荐搭配JS完善。在上方代码中设置渐变背景是为了防止字体只显示一半的问题；同时将height设置为line-height的整数倍是为了防止超出文字显示出来。