CSS: display: inline-flex and text-overflow: ellipsis not working togethier

Question

I have a span. I need both the below mentioned styles. But along with display: inline-flex, text-overflow: ellipsis is not working.

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

when I change inline-flex to inline-block it is working. But I need inline-flex.

How can i make it work?

Please help, Thanks.

Answer 1

I ran into the same issue. What you have to do is put the text within another div which has the overflow style. The inline-flex does not support text-overflow as seen 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>

Where the text-div style is as follows:

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

And parent-div:

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