Question

向我介绍了react/redux/sagas/redux-form Web应用程序的开发。我使用react-bootstrap-table-next以便以表格格式显示数据。

它具有two columns作为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' } }>

如何在表单元格（react-bootstrap-table-next）中包装长文本？

1 个答案: