I have a grid and in some of the grid items divs the text is too long. I've already added text-overflow:ellipsis, white-space: nowrap, and overflow: hidden. This prevents the text from overflowing as expected. but what I wanted to try, was to detect if there was overflow and if so, decrease the font size.

Below is the JavaScript I was attempting. basically it should loop through all data rows and if overflow is detected change the font size. It doesn't have to be Javascript but I thought this would be my best chance at accomplishing this. however the code is not changing the font size, can anyone please help me with changing the font size? in 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;
}