React+Tailwind实现溢出标签隐藏及剩余数量提示功能

核心实现思路 #

通过DOM元素位置计算判断标签是否溢出容器，统计可见标签数量后渲染可见标签+数量徽章，同时监听容器尺寸变化和标签数据更新，实时调整显示内容。

完整代码示例 #

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

const TagList = ({ tags, color }) => {
  const containerRef = useRef(null);
  const [visibleCount, setVisibleCount] = useState(tags.length);

  // 计算可见标签数量
  const calculateVisibleTags = () => {
    if (!containerRef.current) return;
    const containerRect = containerRef.current.getBoundingClientRect();
    const tagElements = containerRef.current.querySelectorAll('.tag-item');
    let count = 0;

    // 逐个判断标签是否在容器可视范围内
    for (let i = 0; i < tagElements.length; i++) {
      const tagRect = tagElements[i].getBoundingClientRect();
      if (tagRect.right <= containerRect.right && tagRect.left >= containerRect.left) {
        count++;
      } else {
        // 后续标签必然溢出，直接终止循环
        break;
      }
    }

    // 预留数量徽章的空间，避免徽章溢出
    if (count < tags.length) {
      // 根据实际样式调整徽章宽度，示例为24px
      const badgeWidth = 24;
      const lastVisibleTag = tagElements[count - 1];
      if (lastVisibleTag) {
        const lastTagRect = lastVisibleTag.getBoundingClientRect();
        if (lastTagRect.right + badgeWidth > containerRect.right) {
          count--;
        }
      }
    }

    setVisibleCount(count);
  };

  useEffect(() => {
    calculateVisibleTags();
    // 监听窗口尺寸变化
    window.addEventListener('resize', calculateVisibleTags);
    return () => window.removeEventListener('resize', calculateVisibleTags);
  }, [tags]); // 标签数据变化时重新计算

  // 保留你原有的getColor逻辑
  const getColor = (color, index) => {
    // 示例逻辑，替换为你的实际实现
    return {
      bgColor: `${color}${((index % 4) + 1) * 100}`,
      text: `${color}800`
    };
  };

  return (
    <div className="flex items-center gap-x-1 mt-2 tag-list" ref={containerRef}>
      {tags.length ? (
        <>
          {/* 渲染可见标签 */}
          {tags.slice(0, visibleCount).map((tag, i) => {
            const { bgColor, text } = getColor(color, i);
            return (
              <div
                className={`tag-item py-1 px-2 bg-${bgColor} text-${text} rounded-lg text-[10px]`}
                key={i}
              >
                {tag}
              </div>
            );
          })}
          {/* 有溢出时显示数量徽章 */}
          {visibleCount < tags.length && (
            <div className="py-1 px-2 bg-gray-200 text-gray-800 rounded-lg text-[10px]">
              +{tags.length - visibleCount}
            </div>
          )}
        </>
      ) : (
        <div
          className={`py-1 px-2 bg-${color}100 text-${color}800 rounded-lg text-[10px]`}
        >
          No Tags
        </div>
      )}
    </div>
  );
};

export default TagList;

关键细节说明 #

1. 标签溢出判断：使用getBoundingClientRect()获取容器和每个标签的边界坐标，对比标签右边界与容器右边界，判断是否溢出。
2. 徽章空间预留：计算可见数量时，额外检查最后一个可见标签加上徽章的宽度是否超出容器，若超出则减少一个可见标签，确保徽章能正常显示。
3. 实时更新：通过useEffect监听窗口resize事件和标签数据变化，确保容器尺寸或标签内容改变时，自动重新计算可见标签数量。
4. 样式兼容：保留你原有的Tailwind样式逻辑，仅新增tag-item类用于获取标签元素，徽章样式可根据需求自定义调整。

内容的提问来源于stack exchange，提问作者Akash