CSS: mapping: inline-flex and text-overflow: ellipsis doesn't work togethier

Question

I have a span . I need both of the styles below. But along with display: inline-flex , text-overflow: ellipsis does not work.

 .ed-span{ display: inline-flex!important; text-overflow: ellipsis; } 

when I change inline-flex to inline-block , it works. But I need inline-flex .

How can I make it work?

Please help, thanks.

Answer 1

I ran into the same problem. What you need to do is put the text in another div that has an overflow style. Inline-flex does not support text overflow, as shown here: https://bugzilla.mozilla.org/show_bug.cgi?id=912434

This should work:

 <div class="parent-div"> <div class="text-div"> Ellipsis' are cool. </div> </div> 

If the text-div style looks like this:

 .text-div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; } 

And parent-div:

 .parent-div { display: inline-flex; }