Tengo que detectar puntos suspensivos en un lapso y encontré el método "e.offsetWidth < e.scrollWidth", funciona bien con texto corto o largo, pero observo que cuando la longitud del texto está cerca del ancho del contenedor, los puntos suspensivos aparece antes de que esa condición se vuelva verdadera.
Aquí hay un JSfiddle que muestra el problema: https://jsfiddle.net/zgowrxbf/23/
¿Hay una mejor manera de detectar puntos suspensivos?
editar : el problema parece ser solo en Firefox, pero tengo que admitir solo este navegador para mi proyecto
var offset = document.getElementById("test").offsetWidth; var scroll = document.getElementById("test").scrollWidth; var isEllipsis = offset < scroll; console.log(offset + " " + scroll + " " + isEllipsis); #test { display: block; width: 180px; border: 1px solid red; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 10px; font-family: "Arial", sans-serif; font-size: 12px; } <span id="test">test xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>Encontré esta solución hacky https://stackoverflow.com/a/64689702/3703099
function isEllipsisActive(e) { var c = e.cloneNode(true); c.style.display = 'inline'; c.style.width = 'auto'; c.style.visibility = 'hidden'; document.body.appendChild(c); const truncated = c.offsetWidth >= e.clientWidth; c.remove(); return truncated; }No soy un gran admirador, ya que agregar un nuevo elemento a DOM cada vez que hacemos la verificación es un gran costo para el rendimiento en comparación con el método anterior que solo compara 2 atributos, pero no pude encontrar algo mejor :(, cualquier solución mejor sigue siendo bienvenidos