Почему не переполнение текста: многоточие не работает с отображением: встроенное сгибание в 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;
  }
}

Текст теперь отображается во всех браузерах, кроме... после максимальной ширины 860 пикселей в Firefox.Видите ли вы причину для этого?

Если я удалю интервал желтым и зеленым, он будет работать с приведенным выше кодом, но я неНе знаю, возможно ли удалить его в Drupal по какой-то причине.

Answer 1

Мне удалось воспроизвести вашу проблему. Оказывается, проблема была со свойством display:inline-block;. Ниже часть, которую я изменил:

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

Здесь - это обновленный CodePen.