css多行显示省略号同时将最后一行只显示一半，查看全文效果

纯CSS就可以做出来，不需要通过后端来截取返回带有"..."的效果。

实现的效果图：

实现的代码：

<p class="content">
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
<div class="more">查看全文</div>
</p>


<style>
.content{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    position: relative;
    line-height: 20px; 
    max-height: 40px;
}

.content:after{
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-right: 352px;
    padding-left: 4px;
    background: linear-gradient(to right, transparent, #fff 0%);
}

.more{
    position: absolute;
    bottom: 0;
    color: #2522ff;
    right: 283px;
    z-index: 9;
    cursor: pointer;
}
</style>

适用范围：
该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注：

1. 将height设置为line-height的整数倍，防止超出的文字露出。
2. 给.content::after添加渐变背景可避免文字只显示一半。
3. 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。