probably tested, my idea is very simple: icon right float flex at will
http://jsrun.net/RIhKp/edit

Hello, landlord. The flex method is better. You can use the negative margin to solve the space you mentioned. For the time being, you haven't figured out how it came into being

I have implemented

the main code is as follows

<style>
    .item{
        display: inline-block;
        max-width: 100%;
    }

   .item-icon i{
       display: inline-block;
       width: 10px;
       height: 10px;
       background: rebeccapurple;
       margin: 2px;
    }
    .item-icon{
        float: right;
    }
    .item-txt{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

<div class="item">
        <div class="item-icon"><i></i><i></i></div>
        <div class="item-txt"></div>
    </div>

https://codepen.io/xboxyan/pe...

^^

DEMO

css https://developer.mozilla.org.
usage details: http://www.daqianduan.com/617.
single line text overflow:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

Multiline text overflow:

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

add a maximum width as follows:

span.main_txt {
    max-width: 200px;
}