easyui一行显示多行_Easyui datagrid 设置内容超过单元格宽度时自动换行显示

datagrid 设置内容超过单元格宽度时自动换行显示

by:授客 QQ：1033553122

测试环境

jquery-easyui-1.5.3

问题描述

单元格内容超过单元格宽度不会自动化换行。如下：

图1：

图2：

解决方法

定义表格时，设置nowrap属性为false.

……

不足的是，设置为nowarp 可以做到换行显示，不足的是，单个英文单词很长的情况下，不会换行显示，遇到数字串也不会换行显示，如上图2

注：

nowrap boolean 设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。

改进方案

添加以下CSS样式

xmp {

white-space: pre-wrap;

word-wrap: break-word;

}

同时，把要展示的数据放

元素标签中，形如 data to display

说明：

white-space: pre-wrap; 保留空白符序列，但是正常地进行换行

word-wrap: break-word;  允许长单词换行到下一行。类似的还有word-wrap: break-all; 如果该行已不能容纳整个单词(还可以容纳单词的部分)，允许长单词被分成两部分，一部分在上一行，剩余部分放下一行开头显示。

展示效果如下