antd内容超过固定长度就显示...，鼠标移入则显示提示

结合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;
  }