table表格超长连续字段（长数字和长单词） 破坏表格布局的问题
近期遇到了这个问题特地去整理了解决方案给到小伙伴，希望能给有同样问题的小伙伴一些帮助
首先，我们是要给到超多文本的字段显示一部分，然后剩下的用省略号代替（…），鼠标浮动上显示全部内容（title属性就行~）
这一步的代码如下：
.ellipsis{
overflow:hidden;
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示;
text-overflow:ellipsis;//溢出部分用省略号代替
-webkit-line-clamp:1; //设置文本显示1行，想要几行把1替换掉就行
-webkit-box-orient:vertical; //从上到下排列子元素;
white-space:normal;
}
{
title: '通知内容',
dataIndex: 'information',
width: 200,
render: (text: string) => {
return (
<span className={
styles.ellipsis} title={
text}>{
text}</span>
);
},
},
效果如下：
（1：全是汉字）
注：这里全是汉字，因此可以实现，完全ok。
（2：连续长数字或者连续长字母）
注：连续长数字或者连续长字母浏览器不会主动截取换行，浏览器不会做出任何动作，因此达不到我们想要的效果。
因此，衍生出此次主题内容，如何解决table表格被超长连续字段（长数字和长单词） 破坏表格布局的问题。
方案如下：直接上代码
{
title: '通知内容',
dataIndex: 'information',
width: 200,
render: (text: string) => {
return (
<span style={
{
wordWrap: 'break-word', wordBreak: 'break-word' }} className={
styles.ellipsis} title={
text}>{
text}</span>
);
},
},
核心代码：style={ { wordWrap: ‘break-word’, wordBreak: ‘break-word’ }}
看效果：
问题解决 ，完美收工~