Cross-browser compatibility: Get Chrome overflow ellipsis behavior in Firefox

Question

I want to get the exact same overflow: hidden and text-overflow: ellipsis behavior that I get in Chrome but in Firefox too. I am looking for a css solution to this issue.

In Chrome when the width of the tag is reduced the text becomes hidden and replaced with an ellipsis but in Firefox the text becomes hidden up until the first letter of the word. See the following images for an example of this.

Chrome Example:

Firefox Example:

The following snippet will allow you to see the issue between browsers:

.resizable {
  resize: both;
  overflow: auto;
  display: flex;
  height: 40px;
  width: 400px;
}

.wrapper {
  border-left: 4px solid #dcdedf;
  margin: 0 8px 5px 0;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 29px;
  max-height: 15px;
}

.chip {
  border: 1px solid #dcdedf;
  border-left: none;
  font-family: Roboto, sans-serif;
  position: relative;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0 4px 4px 0;
  white-space: nowrap;
  overflow: hidden;
  max-height: 15px;
  text-overflow: ellipsis;
  padding: 0 8px;
  font-size: 10px;
  word-break: break-all
}

<div class="resizable">
  <div class="wrapper" style="border-color: #ffce00">
    <span class="chip">Privileged</span>
  </div>
  <div class="wrapper" style="border-color: #00abf3">
    <span class="chip">Escalated</span>
  </div>
  <div class="wrapper" style="border-color: #ba47e2">
    <span class="chip">Outside Council</span>
  </div>
  <div class="wrapper">
    <span class="chip">Sanity, Regression</span>
  </div>
</div>

I have looked at related questions on stack overflow (Make text-overflow ellipsis work similary in firefox and chrome, CSS text-overflow: ellipsis; not working?, CSS Multi Line ellipsis Cross Browser etc.) but they seem to be different issues.

Many thanks,

Chris

Answer 1

You need to add white-space: nowrap; there to work in firefox