帖子卡片标签自适应缩放隐藏：仅截断末尾标签

要实现仅末尾少数标签截断、过短截断标签不显示的需求，需要结合布局调整和JS动态计算处理，具体步骤如下：

1. 调整标签容器与单标签样式 #

先修改标签结构，用父容器包裹所有标签，同时调整单标签样式：

• 父容器设置弹性布局，强制不换行并隐藏溢出内容，保留标签间距：

  <div className='flex flex-nowrap overflow-hidden gap-2' ref={containerRef}>
    <!-- 标签元素 -->
  </div>
  

• 单标签先移除truncate类，保留其他样式，确保默认完整显示：

  <span className='cursor-pointer rounded-3xl px-3 py-1 text-xs font-medium text-light-primary/80 dark:text-dark-primary/80 whitespace-nowrap'>
    {tag.text}
  </span>
  

2. JS动态计算与调整标签 #

通过JS计算容器宽度和每个标签的宽度，从后往前判断哪些标签需要截断或隐藏：

核心逻辑 #

1. 计算所有标签的总宽度（包含间距），若总宽度未超过容器宽度，直接显示所有标签。
2. 若总宽度超出容器，从最后一个标签开始处理：
   • 若标签文本长度≤2，截断后会变成类似“C...”的过短状态，直接隐藏该标签，重新计算总宽度。
   • 若标签文本长度>2，给该标签添加truncate类让它截断显示，停止循环（仅让末尾少数标签截断）。

完整代码示例（React） #

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

const TagList = ({ categories }) => {
  const containerRef = useRef(null);
  const [visibleTags, setVisibleTags] = useState([]);

  useEffect(() => {
    if (!categories.length || !containerRef.current) return;

    const container = containerRef.current;
    const containerWidth = container.offsetWidth;
    // 临时渲染标签获取宽度，避免影响页面布局
    const tempContainer = document.createElement('div');
    tempContainer.className = 'flex flex-nowrap gap-2 invisible absolute';
    categories.forEach(cat => {
      const span = document.createElement('span');
      span.className = 'cursor-pointer rounded-3xl px-3 py-1 text-xs font-medium whitespace-nowrap';
      span.textContent = cat;
      tempContainer.appendChild(span);
    });
    document.body.appendChild(tempContainer);

    const tags = tempContainer.querySelectorAll('span');
    const tagWidths = Array.from(tags).map(tag => tag.offsetWidth);
    document.body.removeChild(tempContainer);

    // 计算总宽度（包含标签间距）
    let totalWidth = tagWidths.reduce((sum, width) => sum + width + 8, 0);
    let adjustedTags = [...categories];
    let i = adjustedTags.length - 1;

    while (totalWidth > containerWidth && i >= 0) {
      const tagText = adjustedTags[i];
      const tagWidth = tagWidths[i];

      // 文本过短的标签直接隐藏
      if (tagText.length <= 2) {
        totalWidth -= tagWidth + 8;
        adjustedTags.splice(i, 1);
      } else {
        // 标记该标签需要截断，总宽度设为容器宽度
        totalWidth = containerWidth;
        adjustedTags[i] = { text: tagText, truncate: true };
        break;
      }
      i--;
    }

    // 统一标签格式
    const finalTags = adjustedTags.map(tag => 
      typeof tag === 'string' ? { text: tag, truncate: false } : tag
    );
    setVisibleTags(finalTags);
  }, [categories]);

  return (
    <div ref={containerRef} className='flex flex-nowrap overflow-hidden gap-2'>
      {visibleTags.map((tag, idx) => (
        <span 
          key={idx}
          className={`cursor-pointer rounded-3xl px-3 py-1 text-xs font-medium text-light-primary/80 dark:text-dark-primary/80 whitespace-nowrap ${tag.truncate ? 'truncate' : ''}`}
        >
          {tag.text}
        </span>
      ))}
    </div>
  );
};

export default TagList;

3. 补充说明 #

• 非React项目逻辑类似：用原生JS获取容器和标签元素，计算宽度后动态添加/移除truncate类或删除标签元素。
• 标签间距gap-2对应8px，计算总宽度时要加上这个值，保证计算准确。
• 可根据需求调整“过短”判断标准，比如把文本长度阈值从2改成3，或通过计算标签最小显示宽度判断。

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