Джаст -тестирование текстового усечения / Показать больше кнопки ⇐ CSS

[Anonymous]

У меня есть следующее, которое решает, показывать ли кнопку «показывать больше»: < /p>

Код: Выделить всё

// some style wrapper:
const InstructionBox = styled(Box)(() => ({
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
lineClamp: 3,
WebkitLineClamp: 3
}));

// use effect that determines whether there are more lines than the clamp:
useEffect(() => {
if (instructionBoxTextRef.current) {
const { current } = instructionBoxTextRef;
if (current.scrollHeight > current.offsetHeight) {
setShowMore(true);
}
}
}, [instructionBoxTextRef]);

// the representative box around variable instruction data:



// and the little button jsx:
{showMore && (

Show More

)}

< /code>
Это работает визуально просто идеально. Открытый переключатель работает очень хорошо, чтобы открыть модал, когда существует более трех строк текста инструкции, показывая полные инструкции в модале. Я пробовал:

, и данные в эту вещь, все безрезультатно. Запуск отладки (контейнер, 10000) на рендеринге показывает все эти теги, отображаемые, но никогда не запускают этот бит линии зажима. Это может быть 100 пунктов в списке, я не могу заставить его рендеринг, чтобы «показать больше» отображается.>

Подробнее здесь: https://stackoverflow.com/questions/794 ... ore-button