I am seeking a CSS solution to achieve the same "overflow: hidden" and "text-overflow: ellipsis" behavior in Firefox as I get in Chrome. In Chrome, when the width of the tag is reduced, the text gets hidden and replaced with an ellipsis. However, in Firefox, the text becomes hidden up until the first letter of the word, as illustrated in the images below.
Chrome Example:
https://i.sstatic.net/WyagL.png
Firefox Example:
https://i.sstatic.net/eNqX0.png
The following code snippet showcases the issue across different 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
}