Как изменить размер шрифта текста в div в javascript

У меня есть сетка, и в некоторых элементах сетки текст слишком длинный. Я уже добавил text-overflow: ellipsis, white-space: nowrap и overflow: hidden. Это предотвращает переполнение текста, как ожидалось. но я хотел попробовать определить, есть ли переполнение, и если да, то уменьшить размер шрифта.

Ниже приведен JavaScript, который я пытался. в основном он должен перебирать все строки данных и, если обнаружено переполнение, изменить размер шрифта. Это не обязательно должен быть Javascript, но я подумал, что это мой лучший шанс добиться этого. однако код не меняет размер шрифта, может ли кто-нибудь помочь мне с изменением размера шрифта? в Javascript, jQuery, CSS и т. д.

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;
}