Ant Design Table 单元格多行展示 - 超出三行省略

要在 Antd Table 中实现一个单元格内多行展示，最多展示三行超出时省略号的效果，可以使用 CSS 的 text-overflow 属性来实现。具体步骤如下：

1. 设置单元格的最大高度为三行的高度，可以使用 CSS 的 max-height 属性来实现。

.cell-overflow {
  max-height: 3em; /* 3行的高度 */
  overflow: hidden;
}

2. 设置文本溢出时显示省略号，可以使用 CSS 的 text-overflow 和 white-space 属性来实现。

.cell-overflow span {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 文本溢出显示省略号 */
  white-space: normal;
}

3. 在 Antd Table 的 columns 配置中，将需要多行展示的单元格的 render 函数中的内容包裹在一个具有 cell-overflow 类名的 div 中。

const columns = [
  {
    title: '内容',
    dataIndex: 'content',
    key: 'content',
    render: (text) => (
      <div className='cell-overflow'>
        <span>{text}</span>
      </div>
    ),
  },
  // 其他列配置...
];

这样就可以实现在 Antd Table 中的单元格内多行展示，最多展示三行，超出时会显示省略号的效果。