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?