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

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

展示效果如下

原文地址:https://www.cnblogs.com/shouke/p/10274891.html

时间: 2024-08-04 05:32:46

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

单元格内文本显示超过单元格宽度的解决办法

开发过程中,表格单元格里的显示数据经常超出单元格的宽度.遇到这种情况一般会这样处理. 1.超出部分显示省略号(...) 解决办法:在css中设置  text-overflow: ellipsis; text-overflow: 2.换行显示 解决办法: 在css中设置   white-space:normal; white-space:(1)normal : 默认 .空白会被浏览器忽略. (2) pre : 换行和其他空白字符都将受到保护 (3) nowrap : 强制在同一行内显示所有文本,直

JQuery easyui datagrid 单元格编辑时,使用浮动的textarea文本框并进行数据校验

有两种方式实现,一种方式是在html中验证,一种方式是在js中进行验证 方式一: <th data-options="filed:'remark',width:200,editor:{type:'textarea'}">备注</th> 方式二: <th data-options="filed:'remark',width:200,editor:{type:'textarea', options:{validType:'maxLength[150]

firefox ie 设置单元格宽度 td width 有bug,不能正常工作。以下方式可以解决

1. firefox ie 设置单元格宽度 td width 有bug,不能正常工作.以下方式可以解决 jqElement.css({ 'min-width': srcth1.width() + "px", 'width': srcth1.width() + "px" }); 2.不要使用CellSpacing  CellPadding,要不效果错误.

关于html表格单元格宽度的计算规则

* { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20px 0 } h2 { margin: 15px 0 } h3 { margin: 10px 0 } p { margin: 5px 0; border-left: 5px solid #ddd; padding-left: 10px } .table-wrap { } .tb-fixed { tab

Flex4 DataGrid实现可复制单元格,同时解决自定义GridItemRenderer出现1009错误的方法

原创内容,如需转载,请注明出处,谢谢 最近在项目中发现Flex的DataGrid不支持内容复制,在涉及到保护敏感数据时倒是很有用处,但大部分情况下,我们还是希望客户能够直接复制DataGrid单元格中的内容进行快速操作,这个与用户体验背道而驰的问题一定要解决,因此想到直接自定义DataGrid的项呈现器来实现. 呆毛如下: 本来以为可以非常顺利,哪知居然给我碰到了一个BUG,网上查了查,也有不少童鞋们碰到了这个问题,不过似乎都没有有效的解决方案,这个主要是思维固化了,总认为官方的就一定是正确的.

C# DataGridView在单元格提示里(ToolTip)显示完整的单元格内容

当单元格内容太多时,则会忽略后面的内容 解决方案: 添加Dgv鼠标移到单元格事件时,设置当前单元格的ToolTipText属性内容为当前单元格内容 void From_Load(object sender, EventArgs e) { this.dgvSystemLog.ShowCellToolTips = true; this.dgvSystemLog.CellMouseEnter += new DataGridViewCellEventHandler(dgvSystemLog_CellMo

jquery easyui datagrid设置行样式 不可删除某行

rowStyler: function (index,row) { if (parseInt(row.ksrs) > 0) { return 'color:red'; } }, onLoadSuccess:function(data){ var rows = data.rows; for (var j = 0; j < rows.length; j++) { if (parseInt(rows[j]["ksrs"]) > 0) { $(".datagrid-

JQuery实现相同内容合并单元格

web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示,一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多,那怎么办呢?我们就中和下利用JQuery来和他一个table里面相同内容的单元格,这里代码跟大家分享下,希望对大家有用,如下: 头部JQuery代码 代码如下: <script type="text/javascript">  jQuery.fn.

132设置被选中单元格的背景颜色(扩展知识:设置被选中单元格的背景图片)

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UITableViewController 4 @property (strong, nonatomic) NSArray *arrDataSource; 5 @property (strong, nonatomic) NSArray *arrSelectionStyle; 6 7 @end ViewController.m 1 #i