html - 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。

我怎样才能让它发挥作用？

请帮忙，谢谢。

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