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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5ab9b-455f0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5ab9b-455f0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?