datagrid 设置内容超过单元格宽度时自动换行显示
测试环境
jquery-easyui-1.5.3
问题描述
单元格内容超过单元格宽度不会自动化换行。如下:
图1:
图2:
解决方法
定义表格时,设置nowrap属性为false.
……
nowrap:false">
……
不足的是,设置为nowarp 可以做到换行显示,不足的是,单个英文单词很长的情况下,不会换行显示,遇到数字串也不会换行显示,如上图2
注:
nowrap boolean 设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。
改进方案
添加以下CSS样式
</span></div><div><span> xmp {</span></div><div><span> white-space: pre-wrap;</span></div><div><span> word-wrap: break-word;</span></div><div><span> }</span></div><div><span>
同时,把要展示的数据放 元素标签中,形如<xmp> data to display
说明:
white-space: pre-wrap; 保留空白符序列,但是正常地进行换行
word-wrap: break-word; 允许长单词换行到下一行。类似的还有word-wrap: break-all; 如果该行已不能容纳整个单词(还可以容纳单词的部分),允许长单词被分成两部分,一部分在上一行,剩余部分放下一行开头显示。
展示效果如下