Antd SubMenu能否用Typography.Paragraph多行作标题？多行时省略号失效怎么办？

问题根源 #

Antd SubMenu的标题外层容器默认带有white-space: nowrap样式，强制文本单行显示，导致Typography.Paragraph配置的多行省略（rows:2）无法生效。

解决方案 #

方案一：给Paragraph添加自定义样式

直接为Paragraph设置取消单行限制的样式，并指定容器宽度，让文本有换行和触发省略的空间：

<SubMenu
  title={
    <Typography.Paragraph
      ellipsis={{ rows: 2, tooltip: { title: 'Long title', placement: 'right' } }}
      style={{ whiteSpace: 'normal', width: 200 }}
    >
      {'这里是需要显示两行后省略的超长SubMenu标题'}
    </Typography.Paragraph>
  }
>
  {submenuItems}
</SubMenu>

• whiteSpace: 'normal'：取消单行限制，允许文本换行
• width：设置固定宽度（或百分比），确保文本达到宽度后触发换行和省略

方案二：用外层容器包裹并设置样式

如果不想修改Paragraph本身的样式，可以用div包裹Paragraph，统一设置容器样式：

<SubMenu
  title={
    <div style={{ width: 200, whiteSpace: 'normal' }}>
      <Typography.Paragraph
        ellipsis={{ rows: 2, tooltip: { title: 'Long title', placement: 'right' } }}
      >
        {'这里是需要显示两行后省略的超长SubMenu标题'}
      </Typography.Paragraph>
    </div>
  }
>
  {submenuItems}
</SubMenu>

注意事项 #

• 必须设置明确的容器宽度，否则文本会无限换行或撑满容器，无法触发省略效果
• 建议使用Antd 4.x及以上版本，旧版本可能存在Typography组件多行省略的兼容性问题

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