如何使用Primreact和Primeflex处理文本溢出

Question

在我的应用程序中，我有一个DataTable组件，一个列，即"Note“可以包含非常长的文本。

我已将该栏定义如下：

<Column style={{maxWidth: 220}} className={"text-overflow-ellipsis"} field={col.field}
                               key={col.field} header={col.header}/>;

我想我可以在这里帮助自己处理来自PrimeFlex的“文本溢出-省略”类，不幸的是，没有成功。

我也使用了第三方库，如反应钳线或反应夹，但这些结果完全相同的结果。

我的DataTable看起来是这样的：

​

我还尝试使用列的body属性呈现一个<ClampLine/>元素，该属性应该将省略号添加到文本中，不幸的是，没有成功。

提前感谢！

Answer 1

没问题，你必须切换到使用这样的body模板.

const bodyTemplate = (rowData) => {
  return 
  <div className="white-space-nowrap overflow-hidden text-overflow-ellipsis">
    {rowData.field}
  </div>
}

<Column 
style={{maxWidth: 220}} 
field={col.field} 
key={col.field} 
header={col.header} 
body={bodyTemplate}/>;

你可以从我的截图中看到它用“.”来剪短。

​

​