The last ellipsis "..." of CSS multi-line text The method of hiding and displaying the ellipsis beyond the last line of multi-line text

page

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

1. To hide and display the ellipsis for the excess part of a line, the code is as follows:

overflow:hidden;
white-space:norwrap;
text-overflow:hidden;

2. For webkit browsers, the following css code can be used to display multiple lines, but for non-webkit browsers, this way of writing is invalid.

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow:ellipsis;

3. Is there a general method to achieve it, of course, through the pseudo class: after

.content{
    
    
    overflow: hidden;
    position: relative;
    line-height: 20px; 
    max-height: 40px;
}

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

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

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

Reference link:

1、https://www.yzktw.com.cn/post/383.html
2、https://www.icode9.com/content-4-788873.html

I'm Tudou, see you next time!