结合antd的Tooltip组件，如果内容超过固定长度就显示…，鼠标移入则显示提示

/*** 结合antd的Tooltip组件，如果内容超过固定长度就显示...，鼠标移入则显示提示* @param param0* @returns*/
const EllipsisText = ({ text }) => {const textRef = useRef<any>(null);const [isOverflow, setIsOverflow] = useState(false);useEffect(() => {const checkOverflow = () => {const element = textRef.current;if (element.scrollWidth > element.offsetWidth) {setIsOverflow(true);} else {setIsOverflow(false);}};checkOverflow();window.addEventListener('resize', checkOverflow);return () => {window.removeEventListener('resize', checkOverflow);};}, [text]);return (<Tooltip title={isOverflow ? text : ''}><div ref={textRef} className={styles.showEllipsis}>{text}</div></Tooltip>);
};

  .showEllipsis {max-width: 200px !important;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}