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

Prog.红毅提问于 2026-03-08 20:57:22 阅读 55

组件

我在用Ant Design的Typography.Text展示一段用户输入的内容，但发现长文本直接溢出了容器，根本不换行。明明容器是有固定宽度的，试过加CSS的word-break也不生效，是不是组件内部有样式覆盖了？

这是我的代码：

import { Typography } from 'antd';
const { Text } = Typography;

function UserInfo() {
  return (
    <div style={{ width: '200px', border: '1px solid #ccc' }}>
      <Text>
        这是一段非常非常非常非常非常非常长的用户输入内容
      </Text>
    </div>
  );
}

我来解答赞 7 收藏

反馈

1 条解答

技术诗诗 Lv1

Ant Design的Typography.Text默认会有white-space: nowrap样式导致不换行。解决方案有两个：

1. 直接给Text组件加style：



<Text style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>

  这是一段非常非常非常非常非常非常长的用户输入内容

</Text>

2. 或者用全局样式覆盖（如果你多处要用）：



.ant-typography {

  white-space: normal !important;

  word-break: break-word;

}

注意安全：如果是展示用户输入内容，记得做好XSS防护，Ant Design默认已经处理了，但如果自己用dangerouslySetInnerHTML就要特别小心。另外word-break最好用break-word而不是break-all，避免破坏正常单词。

我上周也被这个坑过，调试了半天才发现是Ant Design的默认样式搞鬼。现在看到长文本不换行第一反应就是查white-space...

2026-03-08 21:04