En CSS es fácil truncar texto con ... al final.

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

Desafortunadamente, no puedo usar text-overflow: ellipsis en CSS porque Safari muestra una información sobre herramientas nativa del navegador cada vez que se aplica text-overflow: ellipsis y quiero mostrar mi propia información sobre herramientas personalizada.

Sé que puedo detectar si el texto se desborda con:

 elem.scrollWidth > elem.getBoundingClientRect().width

Qué hacer a partir de ahí no puedo comprender. ¿Cómo determino qué caracteres están a la vista para poder tomar los últimos tres caracteres y convertirlos en puntos de parada?