为什么文本溢出：省略号不能与Firefox上的显示：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;
}

对于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之后的...除外。您看到原因吗？

如果我以黄色和绿色删除跨度，则可以使用上面的代码，但是我不知道是否可以出于某些原因在Drupal中将其删除。

Answer 1

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

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

Here是更新的CodePen。