Tengo una cuadrícula y en algunos de los elementos de la cuadrícula, el texto es demasiado largo. Ya agregué text-overflow:elipsis, white-space: nowrap y overflow: hidden. Esto evita que el texto se desborde como se esperaba. pero lo que quería probar, era detectar si había overflow y de ser así disminuir el tamaño de letra.

A continuación se muestra el JavaScript que estaba intentando. básicamente, debe recorrer todas las filas de datos y, si se detecta un desbordamiento, cambiar el tamaño de la fuente. No tiene que ser Javascript, pero pensé que esta sería mi mejor oportunidad para lograrlo. sin embargo, el código no cambia el tamaño de fuente, ¿alguien puede ayudarme a cambiar el tamaño de fuente? en Javascript, jQuery, CSS, etc.

 document.addEventListener('DOMContentLoaded', function() { //the div is called data_row adn tehy are dynamically generated var text_size = document.getElementsByClassName('data_row'); for (var i = 0; i < text_size.length; i++) { if (text_size.scrollWidth > text_size.clientWidth) { //i also tried a specific font size ex. 12px text_size.style.fontSize = "small"; } } }); .data_row { text-align: center; border: 1 px solid; line-height: 25 px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }