为什么 text-overflow: ellipsis 不适用于 Firefox 中的 display: inline-flex？答案

【问题标题】：Why doesn't text-overflow: ellipsis not work with display: inline-flex in Firefox?为什么 text-overflow: ellipsis 不适用于 Firefox 中的 display: inline-flex？
【发布时间】：2019-01-25 14:25:07
【问题描述】：

当使用长面包屑时，例如text-overflow: ellipsis;，Firefox 的行为与 Chrome 和 Internet Explorer 不同。

首先，我必须创建专门针对 Firefox 的特殊条件，例如 display: inline-flex; 以显示文本，但省略号仍然不显示。

对于 Chrome 和 IE：

.easy-breadcrumb {
  text-overflow: ellipsis;
  max-width: 860px;
  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

#path .menu-breadcrumb,
#path .easy-breadcrumb {
  display: inline-block;
  margin-bottom: -5px;
}

火狐浏览器

@supports (-moz-appearance:none) {
  .easy-breadcrumb {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@supports (-moz-appearance:none) {
  #path .menu-breadcrumb,
  #path .easy-breadcrumb {
    display: inline-flex;
    white-space: nowrap;
    max-width: 860px;
  }
}

文本现在显示在所有浏览器上，除了 Firefox 上最大宽度为 860px 之后的 ...。你认为这是什么原因吗？

如果我删除黄色和绿色的跨度，它将与上面的代码一起工作，但我不知道是否有可能出于某种原因在 Drupal 中删除它。

【问题讨论】：

Firefox 中没有显示什么？我测试了一下，Chrome和FF之间似乎存在差异，但是...正在显示
@YaakovAinspan 我的 Firefox 上没有显示 ...
这就是它在 FF 上的样子：imgur.com/8eJ0G63，这就是它在 Chrome 上的样子：imgur.com/HbZFtZx。代码笔：codepen.io/yak613/pen/LqGZKL
@YaakovAinspan 您的代码几乎完全不同。我已经上传了原始html的截图
还有#breadcrumbs a:after { content: "/";不理想，因为如果最后一个链接的标题很大，就像我的情况一样，它不会像我看到的那样利用空白空间。

标签： html css firefox drupal-7

【解决方案1】：

我能够重现您的问题。原来问题出在display:inline-block; 属性上。以下是我修改的部分：

#breadcrumbs a,
#breadcrumbs span {
  /*display: inline-block;*/
  text-decoration: none;
}

Here 是更新后的 CodePen。

【讨论】：