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中。 inline-flex不支持文本溢出，如下所示：https://bugzilla.mozilla.org/show_bug.cgi?id=912434

这应该有效：

__getitem__

text-div样式如下：

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