How to use css only to implement text overflow (ellipsis) and other elements in the same line (compatible with ie9)

<div class="box">
    <p class="text">

<div class="icon"></div> </div> .box { width: 175px; } .icon { display: inline-block; width: 20px; height: 20px; background: red; }

expected effect: if the text is not long enough and no overflow is needed, the .icon element immediately follows the text; if the text is too long, the .icon element does not wrap. The . element does not wrap.
needs to be compatible with ie9, for great answers

Css
Mar.31,2021

give p.text a max-width , make sure there is no line break, and then use text-overflow . It seems that the latter can support IE6: https://developer.mozilla.org..

if you can't, you'll have to JS.


   

I hope it will be helpful to you

Menu