当前位置：首页 > news >正文

Ant Design Menu 一级菜单超长文本悬浮优化方案

news 2025/8/30 5:07:21

Ant Design Menu 一级菜单超长文本悬浮优化方案

在这里插入图片描述

‌适用场景‌：可配置化菜单系统，用户可能配置超长菜单文本，需优化交互体验
‌技术栈‌：React + Ant Design v4/5
‌核心问题‌：带二级菜单的一级菜单项 title 悬浮失效

问题背景

现状分析

在可配置化菜单系统中，用户可能会配置超长的一级菜单文本。默认情况下，Ant Design Menu 组件会对超长文本进行截断，并显示为 ...。然而，当用户希望查看完整内容时，发现悬浮提示（title 属性）在带有二级菜单的一级菜单项上失效。

菜单类型	默认表现	用户痛点
纯一级菜单	超长文本显示 `...`	无法查看完整内容
带子菜单的项	超长文本显示 `...` 且 `title` 失效	关键信息不可见

复现路径

<Menu
  items={[
    {
      key: "1",
      label: "这是一个超长的一级菜单文本内容",
      title: "悬浮应显示完整内容" // ✅ 普通项生效
    },
    {
      key: "2",
      label: "带子菜单的超长文本",
      title: "应显示但实际失效", // ❌ 带子菜单失效
      children: [{ key: "2-1", label: "子项" }]
    }
  ]}
/>

技术解析

失效原因

1‌. DOM 结构差异

普通菜单项的 title 属性直接绑定在 <div> 元素上。
带子菜单的项则不同，其标题被包裹在多层 <div> 和 <span> 元素中，导致 title 属性无法正确触发。

<!-- 普通菜单项 -->
<li class="ant-menu-item">
  <div title="生效">文本</div> <!-- 直接绑定 -->
</li>

<!-- 带子菜单的项 -->
<li class="ant-menu-submenu">
  <div> <!-- 标题容器 -->
    <span>文本</span> <!-- 实际文本层 -->
    <i>下拉图标</i>
  </div>
</li>

2. ‌AntD 样式限制

.ant-menu-submenu-title 样式中设置了 overflow: hidden，这会导致悬浮提示失效。

.ant-menu-submenu-title {
  display: flex;
  overflow: hidden; /* 导致悬浮失效 */
}

解决方案

核心思路

‌统一通过 span 包裹策略‌，实现：

精确控制文本容器宽度
保持 ... 溢出效果
确保悬浮提示始终可用

实现代码

// 封装智能文本组件
const SmartMenuItem = ({ text, maxWidth = 160, hasChildren }) => (
  <span
    style={{
      display: 'inline-block',
      width: `${maxWidth}px`,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      verticalAlign: hasChildren ? 'bottom' : 'middle'
    }}
    title={text} // 始终保留原生提示
  >
    {text}
  </span>
);

// 生成菜单配置
const genMenuItems = (items) => 
  items.map(item => ({
    ...item,
    label: (
      <SmartMenuItem 
        text={item.label} 
        hasChildren={!!item.children}
      />
    ),
    children: item.children && genMenuItems(item.children)
  }));

// 使用示例
<Menu items={genMenuItems(rawItems)} />

进阶优化

响应式宽度控制

// 根据屏幕宽度动态调整
const [maxWidth, setMaxWidth] = useState(160);

useEffect(() => {
  const handleResize = () => {
    setMaxWidth(window.innerWidth > 992 ? 200 : 120);
  };
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

性能优化建议

// 使用 useMemo 避免重复计算
const menuItems = useMemo(
  () => genMenuItems(rawItems),
  [rawItems]
);

样式覆盖方案

// 修复子菜单布局
.ant-menu-submenu-title {
  .smart-text {
    margin-right: 8px; // 保持与下拉图标的间距
  }
}

方案对比

方案	优点	缺点	适用场景
原生 `title`	零依赖	子菜单失效	简单系统
`Tooltip` 组件	样式统一	增加包体积	设计严格的项目
‌本文方案	精准控制	需手动管理宽度	可配置化菜单系统

最终推荐方案

我们推荐使用本文提出的 span 包裹方案，并结合响应式宽度控制和性能优化建议，以实现最佳的用户体验。

import { Menu } from 'antd';
import { useMemo } from 'react';

const SmartMenu = ({ items, maxWidth = 160 }) => {
  const processedItems = useMemo(() => 
    items.map(item => ({
      ...item,
      label: (
        <span
          style={{
            display: 'inline-block',
            width: `${maxWidth}px`,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
          }}
          title={item.label}
        >
          {item.label}
        </span>
      ),
      children: item.children && processItems(item.children)
    })), 
    [items, maxWidth]
  );

  return <Menu items={processedItems} />;
};

‌使用建议‌：