CSS ellipsis truncation when width is narrower than ellipsis character

Question

I'm using the following CSS to truncate text with ellipsis.

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

This works well for me, but doesn't behave as I would like when the width of the element is smaller than the width of the ellipsis character. I would expect that the ellipsis character would be truncated, but instead the original text is displayed truncated without the ellipsis.

See this JSFiddle for an example.

While I can avoid this issue with a minimum width, I'm curious to find out if there's a simple way to show a truncated ellipse character instead of the truncated text.

Answer 1

I meet the same question with you, there is a width threshold for truncated ellipse character changing to truncated ellipse text, and the width threshold is affected by the font-size, and is different from kind of browsers. if we know the width threshold, we can manually use '...' to replace the original text. however, the width threshold is unknown...