JQGrid表头自动换行的办法:

如果table的header部分字段太多或字段文字太长需要自动换行时,可尝试如下css。

<style type="text/css" media="screen">
    th.ui-th-column div{
        white-space:normal !important;
        height:auto !important;
        padding:0px;
    }

然后在文字中需要换行的地方加空格,这样就能实现自动换行了。

单元格内的文本自动换行 :

加入样式:

.<style>
.ui-jqgrid tr.jqgrow td {
   white-space: normal !important;
   height:auto;
   vertical-align:text-top;
   padding-top:2px;
 }
</style>

注意:这种设置无法让长英文字母或数字自动换行,例如:wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww.txt

(IE浏览器)连续的英文字符和阿拉伯数字,需使用word-wrap : break-word ;或者word-break:break-all;实现强制断行,即:

<style>
.ui-jqgrid tr.jqgrow td {
  white-space: normal !important;
  height:auto;
  vertical-align:text-top;
  padding-top:2px;
  word-break:break-all;
 }
</style>

(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本还没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

转自http://blog.csdn.net/zhengxiangwen/article/details/9120215

jqgrid自动换行的更多相关文章

  1. jqgrid 自动换行

    <style>.ui-jqgrid tr.jqgrow td { white-space: normal !important; height: auto; vertical-align: ...

  2. jqGrid实现表头自动换行

    当jqGrid表头内容过多无法全部展示时,添加以下css实现表头自动换行. <style type="text/css"> /* jqgrid 表头自动换行 */ th ...

  3. jQgrid问题总结

    最近一段时间一直在使用jqgrid这个免费的插件,网上的资料也比较多.比较全,但是这里还是整理几个自己在开发过程中遇到的小问题. 1.自动换行 一行数据过多需要自动根据内容换行时,如果遇到在表格中的汉 ...

  4. jqgrid again

    之前有提及过jqgrid这个很不错的jquery grid, 非常适合企业MIS系统使用. 本文以一个显示学生成绩结果的页面, 来说明它的一些用法, 手写代码, 运行可能会报错, 不过思路是经过验证的 ...

  5. iOS之UILabel的自动换行

    思路: 获取UILabel的frame大小 获取UILabel的字体大小 获取UILabel的文本内容 根据上面的3部分数据,计算文本显示区域大小 根据4计算的大小,实时改变UILabel的frame ...

  6. jqGrid合并表头

    jqGrid是一款常用的制表软件,最近开发刚好用到.记录一下常用功能留着以后查找顺便发扬一下开源精神. 二级表头是一种经常会碰到的需求,很多时候为了方便查找需要在原有的表头上再加一层,区分表格不同列的 ...

  7. jqGrid插件getCol方法的一个改进

    jgGrid插件是非常常用的一个基于jQuery的表格插件,功能非常强大.我最近也频繁使用.但是这个插件也有一些不够完善的地方.比如这个getCol方法. getCol方法接受三个参数 colname ...

  8. jqgrid+bootstrap样式实践

    jqgrid+bootstrap样式实践,报错数据加载,选中,删除等功能 需要引入的样式 bootstrap.min.css ui.jqgrid.css 需要引入的JS jquery.min.js b ...

  9. jqGrid jqGrid分页参数+条件查询

    HTML <div class="row"> <div class="col-sm-20"> <form id="for ...

随机推荐

  1. android何如获取SIM卡提供国家代码(ISO)

    TelephonyManager telManager = (TelephonyManager)getSystemService(Context.TELEPHONY_SERVICE); telMana ...

  2. Hive 中的变量

    Hive的变量前面有一个命名空间,包括三个hiveconf,system,env,还有一个hivevar hiveconf的命名空间指的是hive-site.xml下面的配置变量值. system的命 ...

  3. node.js 连接 mysql

    var mysql = require("mysql"); var connection = mysql.createConnection({ host: '127.0.0.1', ...

  4. HttpURLConnection上传文件

    HttpURLConnection上传文件 import java.io.BufferedReader; import java.io.DataInputStream; import java.io. ...

  5. 【转】Elasticsearch5.0 安装问题集锦

    Elasticsearch5.0 安装问题集锦 elasticsearch 5.0 安装过程中遇到了一些问题,通过查找资料几乎都解决掉了,这里简单记录一下 ,供以后查阅参考,也希望可以帮助遇到同样问题 ...

  6. Windows操作系统下 使用c++ WIN32API禁用控制台最小化和关闭按钮

    #include<Windows.h> //屏蔽控制台最小按钮和关闭按钮 HWND hwnd = GetConsoleWindow(); HMENU hmenu = GetSystemMe ...

  7. VS调试-添加命令行参数

    Project -> Properties -> Configuration Properties -> Debugging 在Command Arguments里填上即可

  8. python学习笔记(4)--聊天记录处理

    说明: 1.把冒号和前面的名字去掉 2.男的台词放一个txt文件,女的台词放一个txt文件 3.遇到======就重新生成一个文件 record.txt: 婷婷:迪迪早啊! 迪迪:早啊! 婷婷:111 ...

  9. Bootstrap学习笔记(8)--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  10. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...