Ant Design表格标题换行问题：如何实现且不影响其他表格

针对你遇到的表头标题过长需要自动换行，又不想全局CSS影响其他表格的问题，可以用以下几种针对性的方案：

方案一：给当前列表头添加内联样式 #

直接在列配置的title中传入带样式的React元素，仅作用于该列表头：

{
  title: <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>This title needs enter new line</div>,
  dataIndex: 'name',
  align: 'left',
  width: 100,
}

• whiteSpace: 'pre-wrap' 保留空格并自动换行
• wordBreak: 'break-word' 确保长单词也能换行适应列宽

方案二：给目标列添加自定义类名（适合多列复用） #

先给需要换行的列添加专属类名，再写针对性的CSS：

1. 列配置中通过colProps指定类名：

{
  title: 'This title needs enter new line',
  dataIndex: 'name',
  align: 'left',
  width: 100,
  colProps: {
    className: 'wrap-header-column'
  }
}

2. 对应的专属CSS（仅作用于带该类名的表头）：

.wrap-header-column .ant-table-cell {
  white-space: pre-wrap;
  word-break: break-word;
}

方案三：手动插入换行符 #

如果标题的换行位置固定，可直接在标题中插入<br />标签（需用JSX语法）：

{
  title: <>This title needs<br />enter new line</>,
  dataIndex: 'name',
  align: 'left',
  width: 100,
}

以上方案都只会对目标列/表格生效，不会影响其他表格的样式。

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