9

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.

Ross Smith
  • 91
  • 1
  • 3

1 Answers1

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...

keben hu
  • 95
  • 6