Есть ли эффективный способ показать/скрыть текст в элементе в зависимости от его ширины?
Например, есть элемент с динамической шириной, которая может изменяться, и текст, отображаемый в нем. Я хочу, чтобы текст отображался только тогда, когда ширина элемента достаточно широка, чтобы показать его полностью, и скрывался, когда он выходит за пределы элемента (без разрывов строк, только одна строка)
Я пытался написать реагирующий компонент, который бы отображал такой текст, но у меня он работает только для статической ширины, при изменении текст не исчезает/не появляется. А еще мне не нравится, как это сделано здесь:
const AdaptiveText: React.FC = ({ text }) => {
const textRef = useRef(null);
const [isOverflowing, setIsOverflowing] = useState(false);
useEffect(() => {
const checkOverflow = () => {
if (textRef.current) {
setIsOverflowing(textRef.current.scrollWidth > textRef.current.clientWidth);
}
};
checkOverflow();
window.addEventListener("resize", checkOverflow);
return () => {
window.removeEventListener("resize", checkOverflow);
};
}, [text]);
return (
style={{
width: "100%",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
display: isOverflowing ? "none" : "block",
position: "relative",
}}
ref={textRef}
title={isOverflowing ? text : ""}
>
{text}
);
};
Подробнее здесь: https://stackoverflow.com/questions/793 ... t-overflow
