Whenever I use "ellipsis" for text wrapping, random characters show up? (Is it a charset problem?)

I am trying to wrap a text and put ‘…’ after some length on my Cytoscape graph labels. I have this code:

style: [{
  selector: 'node',
  css: {
    'label': 'data(id)',
    'text-wrap': 'ellipsis',
    'text-max-width': 10,
    'text-justification': 'left',
    'font-family': 'serif',
    'color': 'red'
  }
}]

However when I do this, random characters show up instead of the original text.
There was a similar question on Stack Overflow: text-overflow: ellipsis is displaying different character

In here, the accepted answer tells that the charset has to be utf-8 and the font should be supported by U+2026.

Thus I put this tag in my HTML:

<meta charset="UTF-8">

And my font family is serif, so I do not know what can solve the problem.
PS: This is the documentation that tells how to use Cytoscape text wrapping: https://js.cytoscape.org/#style/labels And I was able to wrap the text using the wrap option instead of ellipsis thus I do not think the code structure is wrong.

70 thoughts on “Whenever I use "ellipsis" for text wrapping, random characters show up? (Is it a charset problem?)”