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

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

Firefox

@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 之后的 ... 之外，所有浏览器都可以显示文本。你知道这是什么原因吗？

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

Answer 1

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

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

Here 是更新后的 CodePen。

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

Why doesn't text-overflow: ellipsis not work with display: inline-flex in Firefox?

html

css

firefox

drupal-7