Tengo una serie de elementos que se mostrarán dentro de un cuadro de 500 px de ancho. Supongamos que la matriz es [john, johnbbab, johnabraham] y necesito mostrar la cadena completa o dar puntos suspensivos en consecuencia si el texto se desborda. Por ejemplo: si la caja no puede contener el segundo elemento, es decir, johnbbab, el contenido de la caja se verá como [john, ...].
El problema al que me enfrento es determinar cómo representar esto según el ancho del texto, suponiendo que el tamaño de fuente sea de 10 px.
PD: Necesito que esto se haga es Javascript
Hum, ¿no puedes simplemente poner ese nombre en una clase? Con eso, puede recorrer todo y calcular la suma del ancho de ellos. Puede verificar si la suma es mayor o menor que el padre y hacer su cambio si es necesario.
No es necesario saber el tamaño de fuente o el ancho del cuadro con eso.
Puede usar flexbox y configurar el contenido div según el ancho del div. Puede intentar adaptar esto a sus necesidades.
// short width 190px // const list = ["john", "johnbbab", "johnabraham"]; // long width 491 const list = ["john", "johnbbab", "johnabraham", "peterparker","johnsnow","josemourinho","olegunnar"]; // if width is short document.getElementById("names").innerHTML = list; // you can set maybe 190px as width to shrink the names if (document.getElementById("names").offsetWidth > 190) { document.getElementById("names").innerHTML = `${list[0]}...`; } #names { width: fit-content; background-color: green; padding: 5px; color: white; } <div id="names" ></div>