console
<div class="container">
<div class="content-wrapper">
<div class="content">
<span class="icon-1">等</span>
<span>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</span>
<span class="icon-2">...等<span>
</div>
</div>
</div>
.container{
max-width: 300px;
}
.content-wrapper{
display: flex;
position: relative;
overflow: hidden;
}
.content{
font-size: 14px;
line-height: 20px;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.content::before{
content: '';
display: block;
float: right;
width: 0px;
height: calc(100% - 18px);
}
.content::after{
position: absolute;
content: '';
display: inline-block;
width: 100%;
height: 100%;
background: #ffffff;
}
.icon-1{
margin-left: 8px;
float: right;
clear: both;
display: block;
}
.icon-2{
position: relative;
display: inline-block;
margin-left: 2px;
}
.icon-2::after{
content: '';
position: absolute;
background: #ffffff;
left: 0px;
bottom: -40px;
height: 40px;
width: 40px;
}