Antd table 如何将文本分几行放入单元格中

Question

在 Antd 中，有一种方法可以将表格单元格中的文本显示为多行。 我试着把

</br>

， , 进入正文。

有人已经找到办法做到这一点了吗？

Answer 1

最后这是我的解决方案。

每列的文本包含一个 当需要新线路时。

在表定义之后，我将样式空白：'pre'：

<Table style={{ whiteSpace: 'pre'}} columns={columns} dataSource={data} title={title} .../>

这似乎按预期工作。

Answer 2

希望在这里回答问题永远不会太晚：D

使用表格单元格的渲染器，如下所示，您可以在其中使用 HTML 标签（我使用的是 React，因此它的格式为带有 <> 父元素的 ReactNode）：

const columns = [
    {
      title: "Start",
      dataIndex: "start",
      key: "start",
      render: (text) => <>
      <p>{text.split("@")[0]}</p>
      <p>{text.split("@")[1]}</p>
      </>
    },
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (text) => text
    }]

Answer 3

我的段落文本没有特殊字符。这是我从 API 获得的纯文本。所以我检查了表格单元格，发现它正在使用

white-space: nowrap;

这就是为什么更改单元格宽度不会为文本创建新行。所以我就这样改了

{
    title: "Address",
    dataIndex: "Address",
    key: "Address",
    width: 250,
    render: text => <div style={{ whiteSpace: 'break-spaces', width: '250px' }}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,</div>,
},

我输入了

whiteSpace: 'break-spaces'

，它创建了一个新行。