CSS: display: inline-flex 和 text-overflow: ellipsis 不能一起工作

Question

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

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

当我将 inline-flex 更改为 inline-block 它正在工作。但我需要 inline-flex 。

我怎样才能让它工作？

请帮助，谢谢。

原文由 Erma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到了同样的问题。您需要做的是将文本放在另一个具有溢出样式的 div 中。 inline-flex 不支持文本溢出，如下所示： https ://bugzilla.mozilla.org/show_bug.cgi?id=912434

这应该有效：

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

其中text-div样式如下：

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

和父分区：

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

原文由 shoke 发布，翻译遵循 CC BY-SA 3.0 许可协议