datagrid 设置内容超过单元格宽度时自动换行显示
by:授客 QQ：1033553122
测试环境
jquery-easyui-1.5.3
问题描述
单元格内容超过单元格宽度不会自动化换行。如下：
图1：
图2：
解决方法
定义表格时，设置nowrap属性为false.
<table id='tt' class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:500px" data-options="
……
nowrap:false">
<thead>
……
</thead>
</table>
不足的是，设置为nowarp 可以做到换行显示，不足的是，单个英文单词很长的情况下，不会换行显示，遇到数字串也不会换行显示，如上图2
注：
nowrap boolean 设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。
改进方案
添加以下CSS样式
<style>
xmp {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
同时，把要展示的数据放 <xmp> 元素标签中，形如<xmp> data to display </xmp>
说明：
white-space: pre-wrap; 保留空白符序列，但是正常地进行换行
word-wrap: break-word; 允许长单词换行到下一行。类似的还有word-wrap: break-all; 如果该行已不能容纳整个单词(还可以容纳单词的部分)，允许长单词被分成两部分，一部分在上一行，剩余部分放下一行开头显示。
展示效果如下
作者：授客
QQ：1033553122
全国软件测试QQ交流群：7156436
Git地址：https://gitee.com/ishouke
友情提示：限于时间仓促，文中可能存在错误，欢迎指正、评论！
作者五行缺钱，如果觉得文章对您有帮助，请扫描下边的二维码打赏作者，金额随意，您的支持将是我继续创作的源动力，打赏后如有任何疑问，请联系我!!!
微信打赏
支付宝打赏 全国软件测试交流QQ群