Проверка и усечение данных, передаваемых в качестве реквизита, на основе ширины строки таблицы. ⇐ CSS

[Anonymous]

Я пытаюсь проверить ширину строки таблицы. В имеющемся здесь компоненте я определил интерфейс того, как выглядят данные, я хочу проверить div ширину, а также установить данные, усеченные с помощью свойства класса затмения переполнения текста в случае, если они переполняются, и отображать данные как есть, если они не переполнены , Также я хочу показать, что слова с не отображаются, но присутствуют на случай, если данные будут усечены. (Думаю, для этого можно использовать срез, чтобы получить срез массива)

Пример ввода в виде массива строк с индексами :0: ["я", "автомобиль", "изображение", "бла", "бла", "бла", "велосипед"] 1:["я"] 2:["я", "машина", "изображение", "бла"]

ожидаемый результат:
я, машина... [5] мне (в зависимости от ширины элемента)
Учитывая, что размер экрана можно изменять, ширина tr будет меняться в зависимости от экрана

Структура основного компонента

Отправитель Получатели Тема Дата Время {Object.entries(emailsByDate).map(([datetime, emailGroup]) => ( {emailGroup.map(({ id, from, to: получатели, тема, дата и время }) => ( {от {тема ))} ))} компонент отображения получателей
импортировать React, { useLayoutEffect, useState } из «реагировать» импортировать стили из 'styled-comments' импортировать { useRef } из «реагировать» //делать // воспроизводим данные путем взаимодействия с массивом переданных объектов //определяем интерфейс данные интерфейса { получатели: строка[] } const Overflow = styled.span` размер шрифта: 16 пикселей; цвет: #333333; отступ-верх: 5 пикселей; отступ снизу: 5 пикселей; отступ слева: 10 пикселей; отступ справа: 10 пикселей; цвет фона: красный; ширина: 100%; пробел: nowrap; пробел: nowrap; ` функция RecipientsDisplay(данные: данные) { //логика для обработки отображения e const classcheck = useRef(ноль) const [усеченный, setTruncated] = useState (false) useLayoutEffect(() => { если (classcheck.current) { если (classcheck.current.clientWidth