easyui dataGrid 设置了nowrap:false 却没有换行

演示问题:

问题描述:
格式化数据后因数据太长,无法在一行显示,在一行显示后发现数据过长,只好选择DataGrid组件的nowrap属性(ps:设置在列属性无效),可发现设置了该属性后过长的数据仍然被截取了,这是为何???

问题分析:
查阅资料后发现: nowrap属性 对于英文字母,数字无效,设置列宽度,也不能自动换行。换行要求一个汉字/单词为单位,上述情况单词是由多个字符拼接而成无法识别;
ps: 如果想让数据在一行显示,可固定列属性 fixed:true

<th data-options="field:'permissions',width:'30%',align:'center',formatter:perFormatter">所有权限</th>
<%--fixed:true 固定列宽在一行显示,需要去掉width--%>

解决问题:
1_先设置nowrap:false

<table id="dg" class="easyui-datagrid" data-options="nowrap:false" />

在th>field 中设置无效:

<th data-options="field:'sn',width:'10%',align:'center'">角色编码</th>

2_将格式化后的数据放入如下样式的div中
允许单词内换行：word-break:break-all;
允许在长单词或url地址内部进行换行：word-wrap:break-word;
保留空白符序列,也能正常地进行换行：white-space:pre-wrap;

/*v 值,r 行, i 索引*/
function perFormatter(v,r,i){
    var arr = [];
    $.each(r.permissions, function (i,o) {
        arr[i] = o.sn;
    });
    //使用该样式的div标签包裹的文本都会换行
    return '<div style="word-break:break-all; word-wrap:break-word;white-space:pre-wrap;">'+ arr.toString() + '</div>';
}