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; 
}