Truncate String & Add Dots If overflowing

Question

I'm trying to build a list with items containing meeting-information such as name, location, and date. one issue I'm coming up within REACT is that I would need a way to determine whether the string should add "..." to the meeting name where its truncated (if overflowing its container). The items are built with divs and p's and placed in a grid.

The only solution I've come up with is to create a lot of hidden <div> containing the subject enter image description here name and then slicing it repeatedly until the string and three dots would fit the container.

As per the below picture, I would like for the string to be "NIKEM SALES AND MARKET...".

below is the css i use at the moment for the cell:

.main-info {
    grid-area: main-info;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

image of meeting-item