关于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:全是汉字)
关于table表格超长连续字段(长数字和长单词) 破坏表格布局的问题的解决方案

:这里全是汉字,因此可以实现,完全ok。

(2:连续长数字或者连续长字母)
关于table表格超长连续字段(长数字和长单词) 破坏表格布局的问题的解决方案
:连续长数字或者连续长字母浏览器不会主动截取换行,浏览器不会做出任何动作,因此达不到我们想要的效果。

因此,衍生出此次主题内容,如何解决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’ }}

看效果:
关于table表格超长连续字段(长数字和长单词) 破坏表格布局的问题的解决方案
问题解决 ,完美收工~

上一篇:R | 载入了名字空间‘ellipsis’ 0.3.1,但需要的是>= 0.3.2


下一篇:CSS经验总结