关于table表格超长连续字段（长数字和长单词） 破坏表格布局的问题的解决方案

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’ }}

看效果：

问题解决 ，完美收工~

标签：word,表格,title,text,break,超长,ellipsis,table
来源： https://blog.csdn.net/different9102/article/details/120739410