EasyUI datagrid数据表格单元格内允许换行 解决单元格内纯数字或英文文本不能换行问题

官方的数据表格属性中提供了nowrap属性
其作用是:设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。
默认为true
在设置数据表格属性时将nowrap属性设置为false时,并且设置表格的宽度,当单元格内数据内容超过宽度时就会自动换行

{
    field : 'khmc',
    title : '生产线',
    align : 'center',
    halign : 'center',
    width:50,
},

图片描述


但是当数据单元格内的文本为纯数字或者英文时不能换行,或出现内容被截断的现象
如图:
图片描述
此时就需要重新定义一下单元格内文本的格式

{
    field : 'pfhm',
    title : '配方编码',
    align : 'left',
    halign : 'center',
    width:50,
    formatter : function(value, row, index) {
        return '<div style="word-break:break-all; word-wrap:break-word;white-space:pre-wrap;">'+ value + '</div>';
    } 
},

用带有以下样式的div标签对包裹文本内容确保内容都会换行
允许在单词内换行:word-break:break-all;
在长单词或 URL 地址内部进行换行:word-wrap:break-word;
保留空白符序列,但是正常地进行换行:white-space:pre-wrap;
图片描述

阅读 1.3k

推荐阅读