长文本自动调整列大小

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; 
}