CSS3：单行文本和多行文本溢出加省略号

单行：

        p {
            width: 200px;
            height: 30px;
            line-height: 30px;
            color: #000;
            font-size:30px;
            border:1px solid red;

            white-space: nowrap;  /*文本单行不换行，剪切溢出部分，
                                    最后加省略号*/
            overflow: hidden; 
            text-overflow: ellipsis;
        }

多行：
通过伪类添加，搭配js实现不溢出时隐藏

        p {
            width: 200px;
            height: 150px;
            line-height: 30px;
            color: #000;
            font-size:24px;
            border:1px solid red;
            position: relative;
            overflow: hidden;
        }
        p:after{
            content: "...";  /*"\02026"*/
            position: absolute;
            bottom: 0;
            right: 0;
            padding-left: 40px;
            background: linear-gradient(to right, transparent 0%,#fff 60%);  /背景颜色线性渐变遮挡背后颜色/


        }

补充一下：

background: linear-gradient(to right, transparent 0%,#fff 60%); 

指的是从左向右，从透明色渐变成白色，60%指的是transparent在水平进度到60%时已经变成白色

如下在webkit内核浏览器中适用的：

    p{
        display:-webkit-box !important;
        overflow: hidden;
        text-overflow:ellipsis;
        word-break:break-all;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;  /*规定文本几行*/   
    }