Search code examples
htmlcssfirefoxdrupal-7

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

When using long breadcrumbs e.g. text-overflow: ellipsis;, Firefox behaves differently from Chrome and Internet Explorer.

First I had to create special conditions to target specifically Firefox, like display: inline-flex; to make the text show, but the ellipsis still don't show.

for Chrome and 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;
}

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

The text is now showing on all browsers, except the ... after the max-width of 860px on Firefox. Do you see a reason for this?

please look at the rectangle in yellow and green. If I remove the span line it will work with the original code above

If I remove the span in yellow and green, it will work with the above code, but I don't know if it's possible to remove it in Drupal for some reason.

Solution

  • I was able to reproduce your issue. Turns out the issue was with the display:inline-block; property. Below is the part that I modified:

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

    Here is the updated CodePen.