当行文本、多行文本超出省略号显示

1.单行文本超出省略号显示：

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

2.多行文本超出省略号显示：

（1）这种方法不兼容，只适合webkit内核的浏览器和移动端

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;(文本的行数)

-webkit-box-orient: vertical;

（2）兼容写法

p {

    position:relative;

    line-height:1.6em;

    height:3.2em;（n行、n倍的行高）

    overflow:hidden;

}

p::after {

    content:"...";

    position:absolute;

    bottom:0;

    right:0;

    padding:0 10px;

    background:url(bg.png) repeat-y;

}

height高度真好是line-height的2倍；

结束的省略号用了半透明的png做减淡的效果，或者设置背景颜色；

IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；

要支持IE8，需要将::after替换成:after；