title: How to adjust Line Length and Words in Jqgrid row/cell data?
body: <p>I am having JQGrid this way,</p>
  
  <pre><code>&lt;div id="parent" class="resizable"&gt;
      &lt;table id="grid"&gt;&lt;/table&gt;    
  &lt;/div&gt;
  
      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 '&lt;div&gt;&lt;/div&gt;&lt;span style="max-height: 63px;"&gt;'+cellvalue+'&lt;/span&gt;';}
      },    
      {
          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 '&lt;div&gt;&lt;/div&gt;&lt;span style="max-height: 63px;"&gt;'+cellvalue+'&lt;/span&gt;';}},
      {
          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 &lt; data.length; i++) {
      mydata[i] = {};
      for (var j = 0; j &lt; data[i].length; j++) {
          mydata[i][names[j]] = data[i][j];
      }
  }
  
  for (var i = 0; i &lt;= 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 &lt; nCol; i++) {
                          if (colModel[i].name === colName) {
                              iCol = i;
                              break;
                          }
                      }
                      if (i &gt;= 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
                  }
              });
          }
      }); 
  
  } 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZyI2M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZyI2M.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>How to adjust jqgrid cell data into 5 lines irrespective of input data length?</p>
  
  <p>I tried truncating the characters where i am loosing the data.</p>
  
  <p>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.</p>
  
  <p>Actually Onload we can show cell <strong>data with only 5 lines and .......</strong> and on clicking can we expand the data? <strong>HOwever it should not cross 5 lines with atlease 6 words in each line of  cell ..</strong></p>
  
  <p>I tried <strong>'text-overflow: ellipsis'</strong> in CSS, however it is limiting the data characters and not 5 lines...</p>
  
  <p>Can anyone help me in how to limit the jqgrid cell data to 5 lines?</p>
  
  <p>And also width should be justified for all the columns dynamically to the max width 100% without any empty gap..</p>
  
  <p>If i use above CSS i also see some extra gap at the end of the grid..</p>
  
  <p>please help..!!!</p>
  
  <p>Used this fork for dynamically adjusting column width... and my jqgrid version is 4.4.1</p>