0

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:

enter image description here

Firefox Example:

enter image description here

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

Cristophs0n
  • 1,246
  • 3
  • 19
  • 27
  • Isn't the problem that the width of the `...` is wider on Chrome as it is on Firefox...? Why not add a `min-width`... and please get rid of the tables, they should be used for tabular data, not for design reasons... – GreyRoofPigeon Mar 07 '18 at 15:18
  • I have replaced the table with a `div` - I made a Minimal, Complete, and Verifiable example based on the original source in which case the tags are part of tabular data. I was only using this to show the behavior on resize. I have a `min-width` property already set. – Cristophs0n Mar 07 '18 at 15:51

1 Answers1

1

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

Abhishek Shah
  • 436
  • 1
  • 3
  • 12