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

展示效果如下

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

  1. (转载)WPF:DataGrid设置行、单元格的前景色

    WPF:DataGrid设置行.单元格的前景色 0. 说明 /********************************** 本示例实现功能1.DataGrid基本操作2.列标题样式3.内容居中 ...

  2. easyUi datagrid鼠标经过提示单元格内容

    此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. jquery.cellTip.js /** * 扩展两个方法 */ using('datagrid', function() ...

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

    1. firefox ie chrome 设置单元格宽度 td width 有bug,不能正常工作. 如果是上面一行 和下面一行是分别属于两个table,但是他们的列需要对齐,也就是说分开画的,然后设 ...

  4. 获取wpf datagrid当前被编辑单元格的内容

    原文 获取wpf datagrid当前被编辑单元格的内容 确认修改单元个的值, 使用到datagrid的两个事件 开始编辑事件 BeginningEdit="dataGrid_Beginni ...

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

    * { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...

  6. CSS开发技巧(二):表格合并边框后的单元格宽度计算

    前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...

  7. colgroup中col定义表格单元格宽度

    colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...

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

    当单元格内容太多时,则会忽略后面的内容 解决方案: 添加Dgv鼠标移到单元格事件时,设置当前单元格的ToolTipText属性内容为当前单元格内容 void From_Load(object send ...

  9. [Xcode 实际操作]五、使用表格-(5)设置UITableView的单元格背景颜色

    目录:[Swift]Xcode实际操作 本文将演示单元格背景颜色的设置 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加两个协 ...

随机推荐

  1. java字符串应用之字符串编码转换

    [转载]原文地址:https://blog.csdn.net/zhouyong80/article/details/1900100 无论是对程序的本地化还是国际化,都会涉及到字符编码的转换的问题.尤其 ...

  2. CSS怎么在项目里引入自定义字体(@font-face)

    前言: 以前我一直用内置的默认字体给文字设置字体,直到一天UI妹纸给了我下面的字体    当时我是蒙蔽的,这个字体的效果如下 默认字体并无该字体,直接设置是没有效果的,这时就需要用到自定义字体了 下面 ...

  3. [Swift]LeetCode140. 单词拆分 II | Word Break II

    Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, add space ...

  4. [Swift]LeetCode762. 二进制表示中质数个计算置位 | Prime Number of Set Bits in Binary Representation

    Given two integers L and R, find the count of numbers in the range [L, R] (inclusive) having a prime ...

  5. [Swift]LeetCode933. 最近的请求次数 | Number of Recent Calls

    Write a class RecentCounter to count recent requests. It has only one method: ping(int t), where t r ...

  6. [Swift]LeetCode957. N天后的牢房 | Prison Cells After N Days

    There are 8 prison cells in a row, and each cell is either occupied or vacant. Each day, whether the ...

  7. 开发常用的 Android 函数库

    第三方函数库(译者注:包括第三方提供的 SDK,开源函数库)以惊人的方式助力着 Android 开发,借助这些其他开发人员辛勤工作的成果,我们开发起来更轻松和快捷.目前存在成千上万的函数库,如何选择正 ...

  8. 机器学习入门15 - 训练神经网络 (Training Neural Networks)

    原文链接:https://developers.google.com/machine-learning/crash-course/training-neural-networks/ 反向传播算法是最常 ...

  9. RabbitQM(消息duilie)

    前言:RabbitMQ 是实现 AMQP(Advanced Message Queuing Protocol 高级消息队列协议)的消息中间件的一种,最初起源于金融系统,用于在分布式系统中存储转发消息, ...

  10. djang-异步——定时操作

    django本身是一个同步框架,flask也是,所以要把它变成异步操作的话还得专门设置一下 我的这个系统呢是windows系统,python3.7的 所以有的库是不可以兼容的 ,然后到时候会稍微修改一 ...