jqgrid自动换行

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的所有版本还没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

你可能感兴趣的:(jqgrid自动换行)