Typography组件文字换行不生效怎么办？

长孙春景提问于 2026-03-05 22:11:19 阅读 46

组件

我在用Ant Design的Typography.Text展示长文本，设置了ellipsis={{ rows: 2 }}，但文字还是不换行，直接一行显示超出了容器宽度，这是为啥？

试过给父容器加width: 100%和word-break: break-all，都没用。代码大概是这样：

<Typography.Text ellipsis={{ rows: 2 }}>
  这是一段很长很长的测试文本，用来验证是否能正常换行并显示省略号……
</Typography.Text>

数据展示

我来解答赞 7 收藏

反馈

1 条解答

FSD-艳青 Lv1

这个问题我也踩过坑，antd的文档里其实有明确说明（但确实不太显眼）。ellipsis换行需要同时满足三个条件：

1. 父容器必须有固定宽度
2. 需要设置ellipsis={{ rows: 2, expandable: true }}（哪怕你不需要展开功能）
3. 文本容器必须是block或inline-block

标准写法应该是这样：



// 父容器样式

const wrapperStyle = {

  width: '300px', // 必须有固定宽度

  display: 'inline-block'

}



// 组件写法

<div style={wrapperStyle}>

  <Typography.Text ellipsis={{ rows: 2, expandable: true }}>

    你的长文本...

  </Typography.Text>

</div>

吐槽一下，antd这个设计确实有点反直觉，rows属性不加expandable就不生效这个设定太隐晦了。我当初也是翻了源码才发现的...

2026-03-05 22:16