長文本自動調整列大小

Question

我從我的BD檢索數據，並試圖在我的網格上顯示它。問題是，當我有一個很長的文字：

正如你可以在圖片中看到，「BBBB ...」，使列調整，它就會變得混亂。我試圖使用文本包裝來實現許多SO的解決方案，但沒有成功，即this one。

這裏是我的代碼：

$("#grid_user").jqGrid({  
    url: 'user.jsp', 
    datatype: 'json', 
    pager: '#pager_user', 
    rowNum: 10, 
    rowList: [10,20,30], 
    autoencode: true, 
    height: 250, 
    autowidth: true, 
    gridview: true,. 
    viewrecords: true,. 
    caption: "Usuários", 
    colNames:['Código','Nome','Perfil','Ativo','Data Inclusão','Login','Senha','Confirma Senha','Email','Grupos','Grupos'], 
    colModel:[          
     {name:'id', width:100, sortable:false, editable: true, editrules: { edithidden: true }}, 
     {name:'name', width:120, editable: true, editrules:{required:true}}, 
     {name:'profile', width:80, editable: true, edittype:'select', editoptions:{value:{ADMINISTRADOR:'Administrador',GESTOR:'Gestor',EXECUTOR:'Executor'}}, editrules:{required:true},sortable:false}, 
     {name:'active', width:40, editable: true, edittype:'select', editoptions:{value:{1:'Sim',2:'Não'}}, editrules:{required:true},sortable:false},  
     {name:'creationDate', width:80, sortable:false, sorttype:"date", datefmt: 'd/M/Y', editable: false}, 
     {name:'login', width:120, sortable:false, editable: true, editrules:{required:true}}, 
     {name:'password', width:80, sortable:false, editable: true, hidden:true, edittype:'password', editrules:{edithidden:true, required:true, custom:true, custom_func:validatePassword}}, 
     {name:'confirmPassword', width:80, sortable:false, editable: true, hidden:true, edittype:'password', editrules:{edithidden:true, required:true}}, 
     {name:'email', width:150, sortable:false, editable: true, editrules:{required:true, email:true}}, 
     {name:'groups', width:80, sortable: false, editable: false, hidden: true}, 
     {name:'groupDescription', width:200, sortable: false, editable: true, edittype:"textarea", editoptions:{ rows:"3", cols:"21", readonly: 'readonly' }} 
    ]}); 

CSS

.ui-jqgrid tr.jqgrow td { 
     word-wrap: break-word; /* IE 5.5+ and CSS3 */ 
     white-space: pre-wrap; /* CSS3 */ 
     white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
     white-space: -pre-wrap; /* Opera 4-6 */ 
     white-space: -o-pre-wrap; /* Opera 7 */ 
     overflow: hidden; 
     height: auto; 
     vertical-align: middle; 
     padding-top: 3px; 
     padding-bottom: 3px 
    } 

如何設置一個固定的寬度列，以便文本亂不起來？

Answer 1

使用此

{ 
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ 
white-space: -pre-wrap; /* Opera 4-6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
white-space: pre-wrap; /* css-3 */ 
word-wrap: break-word; /* Internet Explorer 5.5+ */ 
word-break: break-all; 
white-space: normal; 
}