如何在 AntDesign 的表格组件中对溢出的文字添加省略号？

Question

问题： 在使用AntDesign的表格组件时，我已经设置了每个单元格的宽度，当文本溢出时，我想要文本截断并显示省略号。最终目标是当用户将鼠标悬停在省略号上时，显示一个带有隐藏文本的工具提示。

这是我的现有代码：

<Table
          scroll={{ x: 1500, y: 240 }}
          pagination={false}
          columns={displayFile.headers.map((header) => ({
            title: header.name,
            dataIndex: header.name,
            width: "10rem",
          }))}
          dataSource={displayFile.data.map((row, index) => ({
            ...row,
            rowKey: `${displayFile.name}-row_${index}`,
          }))}
          rowKey={(record: any) => record.rowKey}
        />

非常感谢您提供任何见解。谢谢！

- Tyler Turden

Answer 1

按照以下方式操作。

<Table
//your table props
>

    <Column
        title="Col1"
        key="col1"
        dataIndex="col1"
        width={120}
        ellipsis={true}
    />
    <Column
        title="Col2"
        key="col2"
        dataIndex="col2"
        width={120}
        ellipsis={true}
    />
</Table>  

- Vyas Arpit

---

如果这回答了你的问题，请点赞，@Tyler Turden :) - Arpit Vyas

谢谢您的建议！我已经尝试过了，但似乎AntDesign的表格并没有本地支持省略号的属性。由于我特别想使用AntDesign的表格，您有什么关于如何在AntDesign的表格中实现省略号的见解吗？ - Tyler Turden

是的，antd有省略号属性，请查看此链接，希望您能理解。https://ant.design/components/table/#Column - Arpit Vyas

@TylerTurden 如果这个回答解决了你的问题，请将其视为已标记的答案，以便关闭此问题。 - Arpit Vyas

非常感谢您的支持 :) - Tyler Turden

很高兴能够帮助到您 :) - Arpit Vyas