CSS：显示：inline-flex 和文本溢出：省略号不能一起工作答案

【问题标题】：CSS: display: inline-flex and text-overflow: ellipsis not working togethierCSS：显示：inline-flex 和文本溢出：省略号不能一起工作
【发布时间】：2015-04-06 09:55:17
【问题描述】：

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

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

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

我怎样才能让它工作？

请帮忙，谢谢。

【问题讨论】：

回复可在此处获得：[link]stackoverflow.com/questions/12649904/…@Blender 回答
我们需要您的 HTML 或演示。

标签： html css

【解决方案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;
}

【讨论】：

这个解决方案帮助我解决了另一个我无法使用其他任何东西的问题
请注意，我设法使用此解决方案解决了一个问题，但在父元素上我必须在 CSS 中指定 min-length: 0
任何具有 max-width: 200px 的东西都是 hack，会在别处寻找
@martin 我想你的意思是 min-width: 0;

【解决方案2】：

在显示上使用 min-width: 0: flex 元素在此处查看全文： https://css-tricks.com/flexbox-truncated-text/

【讨论】：