如何在AgGrid中为超出长度的文本添加省略号（...）？

解决方案 #

1. 按列宽超出自动加省略号

text-overflow: ellipsis属性生效需要同时满足三个CSS条件，你之前的配置缺少overflow: hidden，修改后的配置如下：

{
  field : 'Latest Comments',
  headerName :  'Latest Comments',
  width : 250,
  cellStyle : { 
    'text-overflow': 'ellipsis',
    'white-space': 'nowrap',
    'overflow': 'hidden'
  }
}

如果修改后仍不生效，可添加!important强制覆盖AgGrid默认单元格样式：
cellStyle : { 'text-overflow':'ellipsis !important','white-space':'nowrap !important','overflow':'hidden !important'}

2. 按字符数（超过100）截断加省略号

如果你需要的是仅当内容字符数超过100时才显示省略号，和列宽无关，直接用valueFormatter自定义内容格式化即可，不需要依赖CSS：

{
  field : 'Latest Comments',
  headerName :  'Latest Comments',
  width : 250,
  // 超过100字符截断加省略号
  valueFormatter: (params) => {
    const content = params.value || ''
    return content.length > 100 ? `${content.slice(0, 100)}...` : content
  },
  // 可选配置：鼠标悬浮展示完整内容
  tooltipField: 'Latest Comments'
}

内容的提问来源于stack exchange，提问作者C Sharper