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

【问题标题】：How can I add ellipses (...) for longer text in an AgGrid?如何在 Ag Grid 中为较长的文本添加省略号 (...)？
【发布时间】：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例子

标签： javascript jquery css reactjs ag-grid

【解决方案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 }
}

【讨论】：