console
<div class="container">
<div class="content-wrapper">
<div class="content">
<span class="icon-1"></span>
<span>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容CSS实现小图标跟随文本(多行文本省略时显示在省略号后面)</span>
<span class="icon-2"><span>
</div>
</div>
</div>
<div class="container">
<div class="content-wrapper">
<div class="content">
<span class="icon-1"></span>
<span>\CSS实现小图标跟随文本(多行文本省略时显示在省略号后面)</span>
<span class="icon-2"><span>
</div>
</div>
</div>
.container{
width: 200px;
height: 40px;
border: 1px solid;
margin-bottom: 50px;
background: #fff;
}
.content-wrapper{
width: 100%;
height: 100%;
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: 2;
}
.content{
height: 100%;
width: 100%;
position: relative;
}
.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{
height: 16px;
width: 16px;
background-size: cover;
margin-left: 8px;
float: right;
clear: both;
display: block;
background: red;
}
.icon-2{
position: relative;
display: inline-block;
height: 16px;
width: 16px;
background-size: cover;
margin-left: 2px;
transform: translateY(2px);
background: blue;
}
.icon-2::after{
content: '';
position: absolute;
background: #ffffff;
left: 0px;
bottom: -40px;
height: 40px;
width: 40px;
}