How does css display an ellipsis on the second line (compatible with Firefox / IE)

write another vue project. Generally, the multi-line display uses the following

text-overflow: ellipsis;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;     /**/  
-webkit-box-orient: vertical;

but this is not compatible with Firefox and IE,. How can I be compatible with these browsers?

May.22,2021

the attribute firefox of display:-webkit-box; is incompatible with ie.
if you want to do the second line exceeding the ellipsis, it is recommended to use the js control.


flex you can write according to the standard, and the
-webkit-line-clamp that will help you when compiling is not compatible


you can consider writing two div and a parameter a with a default value of false. The first div has only one line and has unlimited width, put all the text content, and judge whether the limit width value is exceeded when the page is generated. If the modification width is changed to the limit value and overflow:hidden is dropped, Then give the parameter a=true. Only the ellipsis is written in the second div, vMustshow = "a", which is displayed only when an is true.
I have this idea. It's a bit complicated and the logic is very simple. I don't know whether it can be realized or not, but I think it should be OK


Don't post the code, the problem has been solved

how to control the text to display only two lines, and the extra intercept is ellipsis, which requires pure css implementation and is compatible with mainstream browsers (including IE 8).

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-1ea7e2e-1e8c.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-1ea7e2e-1e8c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?