'How to implement text-overflow: ellipsis with JavaScript?

In CSS it is easy to truncate text with ... at the end.

.elem {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

Unfortunately I can't use text-overflow: ellipsis in CSS because Safari shows a browser-native tooltip whenever text-overflow: ellipsis is applied and I want to show my own custom tooltip.

I know I can detect if the text is overflowing with:

elem.scrollWidth > elem.getBoundingClientRect().width

What to do from there I can't comprehend. How do I determine which characters are within view so I can grab the last three characters and turn them into full stop dots?

javascript dom

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to implement text-overflow: ellipsis with JavaScript?

Sources

Related Questions