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

IT技术 reactjs antd
2021-04-27 14:15:54

我已经花了太多时间在 Antd官方表格文档和其他地方搜索如何配置 Antd 表格的列标题，但我没有成功：是否有一种简单的方法可以调整列标题的自动换行？

现在，如果该列太小（例如在调整浏览器窗口大小时），字母会以不受控制的方式浮动到新行中。英语连字符会很酷，但一开始我会喜欢有 2 或 3 个省略号点，而不是随意丢弃字符。

任何可以帮助我的 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} />;

相关问题

2个回答

Table.Column.title接受 a ReactNode，所以你只需要渲染一个Ellipsis组件。

您应该使用antdbuilt-in Ellipsis，为此使用TypoghrapyAPI。

注意：您应该拉紧容器的宽度，以便省略号起作用：

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]} />
);

编辑 Q-58287043-ColumnEllipsis

由于我（还）坚持使用旧版本的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-properties 的 CamelWritingStyle。

在组件内部，导入是

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

Antd的实际通话Column包含一个<div>内title，再加上内联CSS：

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

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

其它你可能感兴趣的问题
上一篇可以挽救短路的热床吗？ 下一篇Marlin 使用哪种算法来创建圆弧？