为什么文本溢出：省略号不适用于 Firefox 中的 display: inline-flex？

Question

当使用长面包屑时，例如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 中删除它。

Answer 1

我能够重现您的问题。 原来问题出在display:inline-block; 财产。 下面是我修改的部分：

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

这是更新的 CodePen。