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

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

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; 如果该行已不能容纳整个单词(还可以容纳单词的部分),允许长单词被分成两部分,一部分在上一行,剩余部分放下一行开头显示。

 

展示效果如下

 

 

目录
相关文章
|
7月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
41 2
|
7月前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
7月前
|
前端开发
easyui datagrid 的 tip实现
easyui datagrid 的 tip实现
165 0
|
7月前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习