如何在Antd菜单出现省略号时隐藏标签仅显示图标？

Antd本身没有提供直接的配置项实现这个需求，但可以通过React DOM检测+动态控制或者纯CSS技巧来达成，下面是两种可靠的实现方案：

方案一：React动态检测（推荐，兼容性好） #

通过React的ref获取菜单项DOM，判断文本是否溢出，动态控制标签的显示状态，适配窗口大小变化：

代码实现 #

import { useState, useEffect, useRef } from 'react';
import { Menu } from 'antd';
import { HomeOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';

const App = () => {
  // 存储每个菜单项是否需要隐藏标签的状态
  const [hiddenLabels, setHiddenLabels] = useState({});
  // 存储每个菜单项的DOM引用
  const menuItemRefs = useRef({});

  // 判断单个菜单项的文本是否溢出
  const isTextOverflowed = (key) => {
    const titleElement = menuItemRefs.current[key]?.querySelector('.ant-menu-title-content');
    if (!titleElement) return false;
    // 滚动宽度大于可视宽度表示文本溢出
    return titleElement.scrollWidth > titleElement.clientWidth;
  };

  // 更新所有菜单项的标签显示状态
  const updateLabelVisibility = () => {
    const newState = {};
    Object.keys(menuItemRefs.current).forEach(key => {
      newState[key] = isTextOverflowed(key);
    });
    setHiddenLabels(newState);
  };

  // 组件挂载时检测，窗口resize时重新检测
  useEffect(() => {
    updateLabelVisibility();
    window.addEventListener('resize', updateLabelVisibility);
    return () => window.removeEventListener('resize', updateLabelVisibility);
  }, []);

  return (
    <Menu mode="horizontal" style={{ width: '300px' }}>
      <Menu.Item
        key="home"
        icon={<HomeOutlined />}
        ref={el => menuItemRefs.current['home'] = el}
      >
        {!hiddenLabels['home'] && '首页'}
      </Menu.Item>
      <Menu.Item
        key="user"
        icon={<UserOutlined />}
        ref={el => menuItemRefs.current['user'] = el}
      >
        {!hiddenLabels['user'] && '个人中心'}
      </Menu.Item>
      <Menu.Item
        key="setting"
        icon={<SettingOutlined />}
        ref={el => menuItemRefs.current['setting'] = el}
      >
        {!hiddenLabels['setting'] && '系统设置'}
      </Menu.Item>
    </Menu>
  );
};

export default App;

配套CSS（确保文本溢出显示省略号） #

.ant-menu-item .ant-menu-title-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

说明

• 自动检测每个菜单项的文本是否溢出，溢出时自动隐藏标签
• 窗口大小变化时会重新检测，适配不同宽度场景
• 兼容性好，支持所有现代浏览器及React项目

方案二：纯CSS技巧（适合现代浏览器） #

利用CSS的clip-path和宽度计算，实现宽度不足时隐藏标签，hover时显示：

/* 确保菜单项文本单行溢出显示省略号 */
.ant-menu-item .ant-menu-title-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 32px); /* 32px为图标的固定宽度，可根据实际调整 */
  clip-path: inset(0 calc(100% - (100% - 32px)) 0 0);
  transition: clip-path 0.2s ease;
}

/* hover时显示完整标签 */
.ant-menu-item:hover .ant-menu-title-content {
  clip-path: inset(0 0 0 0);
}

说明

• 无需JS逻辑，纯CSS实现
• 局限性：需要手动计算图标的宽度，对动态图标大小的场景适配性差
• 依赖浏览器对clip-path和calc的支持（现代浏览器均支持）

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