Easyui datagrid 设置内容超过单元格宽度时自动换行显示
datagrid 设置内容超过单元格宽度时自动换行显示
测试环境
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;
}
.datagrid-cell{
数字英文不可以换行中文可以
white-space:normal !important;
word-wrap:nomal
}
</style>
同时,把要展示的数据放 <xmp> 元素标签中,形如<xmp> data to display </xmp>
说明:
white-space: pre-wrap; 保留空白符序列,但是正常地进行换行
word-wrap: break-word; 允许长单词换行到下一行。类似的还有word-wrap: break-all; 如果该行已不能容纳整个单词(还可以容纳单词的部分),允许长单词被分成两部分,一部分在上一行,剩余部分放下一行开头显示。
展示效果如下