CSS：display：inline-flex和text-overflow：省略号无法正常工作

Question

我有一个span。我需要下面提到的两种样式。但随着display: inline-flex，text-overflow: ellipsis不起作用。

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

当我改变 inline-flex到 inline-block它正在

。但我需要inline-flex。

我该如何让它工作？

请帮忙， 谢谢。

Answer 1

我遇到了同样的问题。你必须做的是把文本放在另一个具有溢出风格的div中。内联-FLEX不支持文本溢出如下所示：https://bugzilla.mozilla.org/show_bug.cgi?id=912434

这应该工作：

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

当文本的DIV样式如下：

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

与父 - div：

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