How to adjust Line Length and Words in Jqgrid row/cell data?

Question

I am having JQGrid this way,

<div id="parent" class="resizable">
    <table id="grid"></table>    
</div>

    var data = [[48803, "DSK1", "", "002200220", "OPEN"], [48769, "APPR", "", "777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895777333373457892349058723895", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int",
        formatter:function(cellvalue, options, rowObject) {return '<div></div><span style="max-height: 63px;">'+cellvalue+'</span>';}
    },    
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float",
        formatter:function(cellvalue, options, rowObject) {return '<div></div><span style="max-height: 63px;">'+cellvalue+'</span>';}},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example",   
            gridComplete: function () {
            var grid = $("#grid");          
            resizeGrid1();
    },
});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

function resizeGrid1() {
    $.jgrid.extend({
        setColWidth: function (iCol, newWidth, adjustGridWidth) {
            return this.each(function () {
                var $self = $(this), grid = this.grid, p = this.p, colName, colModel = p.colModel, i, nCol;
                if (typeof iCol === "string") {
                    // the first parametrer is column name instead of index
                    colName = iCol;
                    for (i = 0, nCol = colModel.length; i < nCol; i++) {
                        if (colModel[i].name === colName) {
                            iCol = i;
                            break;
                        }
                    }
                    if (i >= nCol) {
                        return; // error: non-existing column name specified as the first parameter
                    }
                } else if (typeof iCol !== "number") {
                    return; // error: wrong parameters
                }
                grid.resizing = { idx: iCol };
                grid.headers[iCol].newWidth = newWidth;
                grid.newWidth = p.tblwidth + newWidth - grid.headers[iCol].width;
                grid.dragEnd();   // adjust column width
                if (adjustGridWidth !== false) {
                    $self.jqGrid("setGridWidth", grid.newWidth, false); // adjust grid width too
                }
            });
        }
    }); 

} 

When I have long data input for a particular cell, like Number column in mygrid, jqgrid is simply wrapping the content to 15+ lines on applying above CSS for wrap text , which i just need to adjust into 5 lines and not more than that.

How to adjust jqgrid cell data into 5 lines irrespective of input data length?

I tried truncating the characters where i am loosing the data.

I also tried loading limited data onload and onediting the row showing the complete data - But it is not helpful as my grid is readonly all the time.

Actually Onload we can show cell data with only 5 lines and ....... and on clicking can we expand the data? HOwever it should not cross 5 lines with atlease 6 words in each line of cell ..

I tried 'text-overflow: ellipsis' in CSS, however it is limiting the data characters and not 5 lines...

Can anyone help me in how to limit the jqgrid cell data to 5 lines?

And also width should be justified for all the columns dynamically to the max width 100% without any empty gap..

If i use above CSS i also see some extra gap at the end of the grid..

please help..!!!

Used this fork for dynamically adjusting column width... and my jqgrid version is 4.4.1