Quiero poder calcular cuánto de una cadena se muestra antes de que se trunque.
Tengo una lista de artículos. Puede seleccionar cualquier cantidad de elementos de esta lista. Tengo un elemento de panel que muestra una cadena separada por comas de los nombres de los elementos seleccionados. Si la cadena es demasiado larga, se debe truncar y mostrar un valor +{number} de cualquier elemento seleccionado adicional oculto por el truncado.
https://stackblitz.com/edit/angular-ivy-cbyemy
El stackblitz anterior muestra un ejemplo básico del caso de uso.
Título del panel actual:
un artículo, otro artículo, algo... +6
Resultado deseado:
un artículo, otro artículo, algo... +3
Tomé prestada una respuesta de aquí y la modifiqué un poco según el requisito.
Su stackblitz bifurcado, demostración de trabajo actualizada aquí .
Puede obtener el recuento de caracteres visibles de esta función:
countVisibleCharacters(element): number { var text = element.firstChild.nodeValue; var count = 0; element.removeChild(element.firstChild); for (var i = 0; i < text.length; i++) { var newNode = document.createElement('span'); newNode.appendChild(document.createTextNode(text.charAt(i))); element.appendChild(newNode); if (newNode.offsetLeft < element.offsetWidth) { count++; } } return count; }Entonces puedes obtener el sufijo de esta manera:
getTitleSuffix(): void { let element = document.getElementById('title'); let count = this.countVisibleCharacters(element); let substr = element.textContent; substr = substr.substring(count - 1); this.titleSuffix = substr.split(',').length;}