如何旋转MUI菜单列表项文本以查看溢出内容？

针对你的需求，这里提供几种无需额外弹出层的实现方案，均通过CSS hover状态修改样式来展示完整文本：

方案一：鼠标悬停旋转文本（符合你的旋转需求） #

通过在hover时旋转文本并调整容器高度，让完整文本展示出来：

const useTextMenuItemStyles = () => {
  return css({
    container: {
      minHeight: 'auto',
      // 悬停时扩展容器高度，适配旋转后的文本
      '&:hover': {
        minHeight: 'max-content',
        padding: '8px 16px', // 可选：调整内边距避免文本贴边
      },
    },
    label: {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      transition: 'transform 0.3s ease', // 添加平滑过渡动画
      transformOrigin: 'left center', // 设置旋转中心点
      
      '&:hover': {
        transform: 'rotate(-90deg)', // 逆时针旋转90度
        whiteSpace: 'nowrap',
        overflow: 'visible',
        textOverflow: 'unset',
        marginLeft: '16px', // 可选：调整旋转后的文本位置
      },
    },
  });
};

注意事项 #

• 旋转后需要调整MenuItem的minHeight为max-content，避免文本被容器裁切
• transformOrigin控制旋转中心点，确保文本不会偏移到容器外
• 过渡动画可以提升交互体验，避免旋转效果过于突兀

方案二：悬停时自动换行（最直观简单） #

如果不需要旋转，这个方案更易理解且实现简单：

const useTextMenuItemStyles = () => {
  return css({
    container: {
      minHeight: 'auto',
      // 悬停时容器高度自适应内容
      '&:hover': {
        minHeight: 'max-content',
      },
    },
    label: {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      
      '&:hover': {
        whiteSpace: 'normal', // 允许文本换行
        overflow: 'visible',
        textOverflow: 'unset',
      },
    },
  });
};

优势 #

• 无需复杂的transform调整，用户理解成本低
• 文本自然展示，符合常规交互习惯

方案三：悬停时横向滚动（跑马灯效果） #

适合需要保持行高不变，同时展示长文本的场景：

const useTextMenuItemStyles = () => {
  return css({
    container: {
      minHeight: 'auto',
      overflow: 'hidden', // 容器隐藏溢出内容
    },
    label: {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      
      '&:hover': {
        overflowX: 'auto', // 显示横向滚动条
        textOverflow: 'unset',
        animation: 'scroll 10s linear infinite', // 自动滚动动画
      },
      
      // 定义滚动动画
      '@keyframes scroll': {
        '0%': { transform: 'translateX(0)' },
        '100%': { transform: 'translateX(-100%)' },
      },
      
      // 鼠标悬停时暂停动画，方便手动滚动
      '&:hover:hover': {
        animationPlayState: 'paused',
      },
    },
  });
};

特点 #

• 保持原行高，不会改变菜单布局
• 自动滚动展示完整文本，也支持手动拖动滚动条查看

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