css displays ellipses in multiple lines and displays only half of the last line, view the full text effect

It can be made with pure CSS, and there is no need to intercept and return the effect with "..." through the backend.

Realized renderings:

Implemented code:

<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>

Applicable scope:
This method has a wide range of applications, but ellipses will also appear when the text does not exceed the line. This method can be optimized with js.

Note:

1. Setheight to the integer of line-height times to prevent excess text from being exposed.
2. Add a gradient background to.content::after to avoid showing only half of the text.
3. Since ie6-7 does not display content content, you need to add tags to be compatible with ie6-7 (such as: <span>…<span/>); to be compatible with ie8, you need to add ::after is replaced with :after.