如何在 Ag Grid 中为较长的文本添加省略号 (...)？

Posted 2023-02-22

【中文标题】如何在 Ag Grid 中为较长的文本添加省略号 (...)？

【英文标题】：How can I add ellipses (...) for longer text in an AgGrid?

【发布时间】：2021-12-02 20:14:24

【问题描述】：

我有下面的 ag 网格字段，我想在其中添加省略号 - (...) 用于大于 100 的字符。

我尝试在下面查看互联网上的一些材料，但它不起作用 -

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

【问题讨论】：

这是ellipsis，而不是ellipses。见developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

省略号应该自动添加，见this例子

【参考方案1】：

你还应该设置：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

所以：

    field : 'LatestComments',
    headerName :  'Latest Comments',
    maxWidth : 250,
    minWidth : 250,
    cellStyle :  'text-overflow':'ellipsis','white-space':'nowrap', 'overflow': 'hidden', 'padding': 0