Adaptive width of text realized by CSS

the following is a style and how to implement it. The nickname is too long to show the ellipsis, as shown in figure 2.

points to consider

nickname is long, showing ellipsis
the nickname is short, and the icon follows the nickname
need to be increased or decreased from time to time to make it easy to modify.

the implementation scheme that I have come up with

css scheme (the drawback of the flex), I use at the moment is that icons and nicknames sometimes have an irresistible spacing. The second disadvantage is the compatibility of flex.
js calculation scheme (idea), the program uses vue to achieve, the icon is a component, rendering notification of the above own width, dynamically modify the text width.

I would like to ask if there are any other good implementations. I have tried float + BFC , but the results are not good.

Css3 javascript css html html5

Sep.07,2021

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

here in the form of BFC .

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

Previous: How to solve the failure of using native websocket connection in vue?

Next: What is the difference between an event bus (engine) and a message queue?