JS, CSS: How to create a td with a list of items, and if the list overflows cut the list and add a badge?

I have a dataset like this:

{
  name: "Alpha",
  colors: ["color1", "color2", "color3", "color4"],
  date: "2019/11/28",
}

Then a table that shows the data as follows:

------------------------------------------------
Name     Colors                    Date
------------------------------------------------
Alpha    color1, color2, co...     2019/11/28

What I am trying to achieve is to show the items of the Colors column only if they are fully visible, if not, don't show them and add a badge showing how many more there are. For example:

-----------------------------------------------
Name     Colors                    Date
-----------------------------------------------
Alpha    color1, color2, ... [+2]  2019/11/28

I am a bit stuck, I am not sure about how I can detect if the values are fully visible or not. Can someone point me to the right direction?

What I did so far is:

  function formatTo(to) {

    if (to.length > 1) return <div className="to-container">{to[0]}, ...&nbsp;<div className="badge-div">+{to.length-1}</div></div>
    return to[0];
  }

Which basically just cuts all the other values if there is more than one.