咨询：如何高效实现基于动态宽度元素的文本溢出隐藏/显示功能

嗨，我完全懂你想要实现的效果——让文本只在元素宽度足够完全展示时才显示，一旦文本溢出元素（强制单行不换行）就隐藏，而且元素的宽度还是动态变化的对吧？你当前的React组件只在静态宽度下生效，窗口 resize 时虽然加了监听，但如果是元素自身宽度变化（比如父容器布局调整、组件内部状态改变导致宽度变化），这个逻辑就失效了，确实挺头疼的。

先说说你现有代码的核心问题：你只监听了window.resize事件，但元素宽度变化的场景可不止窗口缩放这一种——比如父元素因为响应式布局变宽/变窄、组件内部状态改变触发样式调整，这些情况都不会触发window resize，自然就不会重新检查文本是否溢出。

下面给你几个更靠谱的改进方案，都是实际项目里常用的：

方案一：用ResizeObserver精准监听元素尺寸变化 #

这是现在最推荐的方案，ResizeObserver是浏览器专门用来监听元素尺寸变化的API，不管是什么原因导致的元素宽度变化，它都能精准捕捉到，比window resize灵活太多了。

改进后的代码如下：

import { useRef, useState, useEffect } from 'react';

interface AdaptiveTextProps {
  text: string;
}

const AdaptiveText: React.FC<AdaptiveTextProps> = ({ text }) => {
  const textRef = useRef<HTMLDivElement>(null);
  const [isOverflowing, setIsOverflowing] = useState(false);

  useEffect(() => {
    // 核心检查逻辑：对比内容实际宽度和元素可视宽度
    const checkOverflow = () => {
      if (!textRef.current) return;
      setIsOverflowing(textRef.current.scrollWidth > textRef.current.clientWidth);
    };

    // 组件挂载时先做一次初始检查
    checkOverflow();

    // 创建ResizeObserver实例，监听元素尺寸变化
    const observer = new ResizeObserver(checkOverflow);
    if (textRef.current) {
      observer.observe(textRef.current);
    }

    // 组件卸载时清理监听，避免内存泄漏
    return () => {
      observer.disconnect();
    };
  }, [text]); // 文本内容变化时也要重新检查

  return (
    <div
      style={{
        width: '100%',
        whiteSpace: 'nowrap', // 强制单行，确保溢出判断准确
        overflow: 'hidden',
        // 这里用visibility:hidden替代display:none，隐藏文本但保留元素占位，避免布局塌陷
        visibility: isOverflowing ? 'hidden' : 'visible',
        position: 'relative',
      }}
      ref={textRef}
      title={isOverflowing ? text : ''} // 溢出时显示完整文本 tooltip
    >
      {text}
    </div>
  );
};

额外优化：加防抖避免频繁触发 #

如果元素宽度会频繁变化（比如拖拽调整容器宽度），可以给检查逻辑加个防抖，减少不必要的状态更新：

// 先定义一个简单的防抖函数
const debounce = (func: () => void, delay = 100) => {
  let timer: NodeJS.Timeout;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
};

// 在useEffect里修改成防抖后的检查函数
const debouncedCheckOverflow = debounce(checkOverflow);
const observer = new ResizeObserver(debouncedCheckOverflow);

方案二：兼容老浏览器的降级方案（可选） #

如果你需要兼容非常老的浏览器（比如IE11，现在几乎没人用了），ResizeObserver不支持的话，可以用MutationObserver监听元素的样式变化，或者监听父元素的DOM变化，不过这个实现起来会复杂一些，不如ResizeObserver直接。

最后再提几个注意点：

• 一定要确保whiteSpace: 'nowrap'，否则文本会自动换行，溢出判断就不准确了
• scrollWidth是元素内容的实际宽度（包括溢出部分），clientWidth是元素的可视宽度，这两个值的对比是判断单行文本溢出的标准方法
• 如果你的元素还有内边距或者边框，记得用offsetWidth减去内边距和边框宽度来计算实际可用宽度？不过大部分情况下直接用clientWidth就足够了

备注：内容来源于stack exchange，提问作者Roman Tymchuk