1. 程式人生 > >jqgrid單元格內容過長換行

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的所有版本還沒有解決這個問題,我們只有讓超出邊界的字元隱藏或者,給容器新增滾動條