如何使用Antd实现地址文本超出3行显示省略号的格式化展示需求

问题根因 #

你的现有实现存在两个核心问题：

1. 外层flex布局没有给<Paragraph>组件设置宽度约束，长文本会撑开容器宽度，无法触发3行省略的截断逻辑
2. 后缀部分被拆成了独立的span节点，没有整合到Paragraph的ellipsis配置中，省略逻辑不会自动将后缀拼接到截断位置的末尾

调整方案 #

Antd的Typography.Paragraph的ellipsis.suffix属性支持传入React节点，可以直接把邮编、城市文本都整合到suffix配置里，同时去掉多余的flex布局即可，修改后代码如下：

<div style={{ margin: 10, width: "280px" }}>
  <Paragraph
    strong
    ellipsis={{
      rows: 3,
      suffix: (
        <span>
          , #123 <Text type="secondary">Toronto, ON</Text>
        </span>
      )
    }}
  >
    Very very very very very very very very very very very very very very
    very very very very very long long long long address
  </Paragraph>
</div>

效果说明 #

• 地址较短时：文本不足3行，会完整展示地址主体+后缀内容，无多余省略号
• 地址过长时：超过3行的部分自动截断，第三行末尾拼接省略号+完整后缀，完全符合需求示例的展示效果

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