方式一：

-webkit-line-clamp实现

div{
    display:-webkit-box;
    overfow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

显示效果好，需要四个属性同时使用；鉴于手机浏览器大都基于webkit内核，移动端使用基本无问题；

方式二：

利用after伪元素，定位在父级元素右下角，无法判断文字长度，所以会一直显示，体验不佳,不建议使用；

div{
    position:relative;
    line-height:18px;
    height:36px;
    overflow:hidden;
}
div::after{
    content:'...';
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    /***为了显示更好***/
    background:linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
}

方式三：

利用float实现文本截断，建议使用；

<div class="wrap">
    <div class="text">
        test test  test test test test test test test test test test test test test test
         test test test test
    </div>
</div>

.wrap{
    height:40px;
    line-height:20px;
    overflow:hidden;
}
.wrap .text{
    float:right;
    margin-left:-5px;
    width:100%;
    word-break:break-all;
}
.wrap::before{
    float:left;
    width:5px;
    content:'';
    height:40px;
}
.wrap::after{
    float:right;
    content:'...';
    height:20px;
    line-height:20px;
    /***三个省略号的宽度***/
    width:3em;
    margin-left:-3rem;
    position:relative;
    left:100%;
    top:-20px;
    padding-right:5px;
}