在 Antd 表的列标题中配置自动换行答案

【问题标题】：Configuring word-wrap in column header of an Antd Table在 Antd 表的列标题中配置自动换行
【发布时间】：2019-10-08 13:10:37
【问题描述】：

我已经花了太多时间在official Antd table docu和其他地方搜索如何配置Antd表的列标题，但我没有成功：有没有简单的方法来调整自动换行列标题？

现在，如果列太小（例如，在调整浏览器窗口大小时），字母会以不受控制的方式浮动到新行中。英文连字符会很酷，但首先我会喜欢使用 2 或 3 个 ellipsis 点而不是随意丢弃字符。

请有任何 Antd 专家可以帮助我吗？

最小的非工作示例

import { Table } from "antd";
const { Column } = Table;

const dataSource = [
  {
    key: '1',
    name: 'Mike',
  },
  {
    key: '2',
    name: 'John',
  },
];

const columns = [
  {
    title: 'My very-very-very long column-name',
    dataIndex: 'name',
    key: 'name',                                     
  },
];

<Table dataSource={dataSource} columns={columns} />;

相关问题

Overwriting a single (nested) property when extending a React class 是我面临的更普遍的问题。
How can we configure the Header of ant design table component?
Customize React Antd table header with table data

【问题讨论】：

标签： reactjs antd

【解决方案1】：

Table.Column.title 接受ReactNode，因此您只需要渲染一个Ellipsis 组件。

您应该使用antd 内置Ellipsis，为此使用Typoghrapy API。

注意：你应该调整容器的宽度，这样椭圆才能起作用：

const COLUMN_STYLE = { width: 200 };
<Typography.Text ellipsis={true} style={COLUMN_STYLE}>
  A very long text
</Typography.Text>

纯CSS也可以达到同样的效果，参考text-overflow.

const dataSource = [
  {
    key: '1',
    name: 'Mike'
  },
  {
    key: '2',
    name: 'John'
  }
];

const COLUMN_STYLE = { width: 200 };

const customColumn = {
  title: (
    <Typography.Text ellipsis={true} style={COLUMN_STYLE}>
      My very-very-very long column-name My very-very-very long column-name My
      very-very-very long column-name
    </Typography.Text>
  ),
  dataIndex: 'name',
  key: 'custom'
};

const normalColumn = {
  title: 'My very-very-very long column-name',
  dataIndex: 'name'
};

const TOTAL_COLUMNS = 6;

const columns = [...Array(TOTAL_COLUMNS).keys()].map(key => ({
  ...normalColumn,
  key
}));

const App = () => (
  <Table dataSource={dataSource} columns={[customColumn, ...columns]} />
);

【讨论】：

【解决方案2】：

由于我（还）坚持使用旧版本的 Antd，我采用了 Dennis Vash 建议的内联 CSS 方式。在render() 函数中，我定义了

var myColTitleStyle = {
            textOverflow: 'ellipsis',
            // overflow: "hidden",
            whiteSpace: 'nowrap'
};

有趣的是，我不得不将参数overflow 注释掉，尽管https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow 表明属性text-overflow 需要它才能工作。还要注意 React 中 css 属性的 CamelWritingStyle。

在组件内部，导入是

import { Table } from "antd";
const { Column, ColumnGroup } = Table;

Antd 的Column 的实际调用在title 中包含一个<div>，加上inline-CSS：

<Column
   title={<div style={myColTitleStyle}>My long-long title</div>}
   width=10
>

还请注意，textOverflow 仅适用于绝对宽度，这在 React 中是无量纲的。当使用百分比宽度时，它将不起作用。

【讨论】：