css - 如何在表格单元格中包装长文本(react-bootstrap-table-next)？

Question

我被介绍到 react/redux/sagas/redux-form 网络应用程序开发。为了以表格格式显示数据，我使用了 react-bootstrap-table-next。

它有两列作为Title，Description但是Title列的数据是一个长字符串数据。

foo1,foo2,foo3,foo4,foo5,foo6,foo7 bar

我遇到的问题是它溢出或占据了 Description 下的单元格/行，因此 Description 列下的数据被屏蔽了。

我试过类似的方法，但没有什么不同。

const rowStyle = (row, rowIndex) => {
                return { whiteSpace: 'pre-line'; };
};

<BootstrapTable data={ data } columns={ columns } rowStyle={ rowStyle } />

如何包装这个长字符串，以便它可以包含在 Title 列下单元格的固定宽度内？

[更新]

改为使用以下 css 找到答案。

return { overflowWrap: 'break-word' };

Answer 1

您可以通过在您的标签中提供特定的样式来做到这一点。

<BootstrapTable data={data} bodyStyle={ {width: 500, maxWidth: 500, wordBreak: 'break-all' } }>