jquery - 长文本自动调整大小列

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