antD的table组件，长度过长使用省略号表示

目录

解决的问题

一、antD是什么？

二、使用步骤

1.使用render里面的参数（text）进行长度判断

2.结果

总结

---

---

解决的问题

table组件中，如果一个内容长度大于5，则用省略号显示多余的部分，鼠标放上去弹出提示，也就是总的字符串。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、antD是什么？

随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁集团体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

二、使用步骤

1.使用render里面的参数（text）进行长度判断

代码如下（示例）：

css实现：whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'

{
    title: <strong>项目名称</strong>,
    dataIndex: 'project_name',
    key: 'project_name',
    render: (text) => text.length > 5
      ? <Tooltip placement='top' title={text}>
        <div style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{text}</div>
      </Tooltip>
      :<div>{text}</div>
  },

2.结果

---

总结

antD中table组件的使用，render十分重要