Antd Menu.Item组件能否设置word-wrap？示例无法正常生效

当然可以实现！你遇到的问题大概率是因为Antd的Menu.Item组件默认样式里设置了white-space: nowrap，这个属性会强制文本不换行，所以直接加word-wrap自然不会生效。下面给你几种可行的解决办法：

方法一：行内样式直接设置 #

直接给Menu.Item添加style属性，覆盖默认的white-space，同时配置换行相关属性：

<Menu.Item 
  key="1" 
  style={{ 
    whiteSpace: 'normal', 
    wordWrap: 'break-word',
    wordBreak: 'break-all'
  }}
>
  Option 1Option 1Option 1Option 1Option 1Option 1Option 1Option 1
</Menu.Item>

• whiteSpace: 'normal'：取消默认的不换行限制，让文本可以自动换行
• wordWrap: 'break-word'：当单词长度超过容器宽度时，会在单词内部换行
• wordBreak: 'break-all'：不管单词是否完整，只要到容器边缘就换行（如果更倾向于保持单词完整性，可以只保留wordWrap）

方法二：自定义CSS类（适合复用场景） #

如果多个Menu.Item都需要这个样式，建议定义一个自定义CSS类来复用：
首先在样式文件中添加：

.custom-wrap-menu-item {
  white-space: normal !important;
  word-wrap: break-word;
  word-break: break-all;
}

然后在组件中使用：

<Menu.Item key="1" className="custom-wrap-menu-item">
  Option 1Option 1Option 1Option 1Option 1Option 1Option 1Option 1
</Menu.Item>

这里的!important是为了确保自定义样式优先级高于Antd的默认样式，如果你不想用!important，也可以用更精确的CSS选择器提升优先级，比如：

.ant-menu-item.custom-wrap-menu-item {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}

额外说明 #

如果你的菜单是横向的（mode="horizontal"），可能还需要调整Menu.Item的宽度，比如设置width: fit-content或者固定宽度，否则容器可能会被文本撑得很宽，换行效果不明显。

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