CSS 将文本固定为多行显示，溢出时显示省略号的实现方式及注意要点

平时在开发时，经常会有要求让文字单行或多行显示，多余的文字用省略号代替的需求。
文本单行显示很好解决，用如下的 CSS 属性就行了：

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

那么多行文本的要怎么处理呢，针对多行文本，有二种处理方式，首先就是对于 webkit 内核的浏览器，处理起来比较简单，使用如下 CSS 属性：

  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;  /*要显示的行数*/
  -webkit-box-orient: vertical;

以上的属性在 webkit 内核的浏览器里面是没有问题的，不需要做多余处理，所以做移动端 H5 开发的就比较舒服了。

如果不是在 webkit 内核的话，上面的属性就不行了，需要使用另外的方法。就是利用相对定位在最后面加上一个省略号了，代码可以参考下面：

p {
    position:relative;
    line-height:1.5em;
    /* 高度为需要显示的行数*行高，比如这里我们显示两行，则为3 */
    height:3em;
    overflow:hidden;
}
p:after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    padding: 0 5px;
    background-color: #fff;
}

不过这样会有一点问题：

• 需要知道显示的行数并设置行高才行；
• IE6/7不支持after和content，需要添加一个标签来代替；
• 省略号的背景颜色跟文本背景颜色一样，并且可能会遮住部分文字，建议可以使用渐变的png背景图片代替。

在用上面的二种方法处理的时候，还需要特别注意的一个问题就是，**承载文字的容器不要有 padding-bottom 属性，当设置了 padding-bottom 又同时设置文本多行显示的话，就会发现多行显示的没有效果了，**这一点在其他讲这个问题的文章中基本都没见到有说过，但是如果不注意的话会导致设置的属性没起作用，进而会浪费很多时间去排查问题。所以请务必注意。

以上就是我总结的用 CSS 实现文本单行或多行显示的解决方法。
参考文章： http://lomu.me/post/css-multiline-text-overflow