title: How to apply jQuery ellipsis to jQuery datatable row
body: <p>I want to appends ellipsis (…) to the end of row of datatable(in this comment column). For this I have added jQuery ellipsis js. how should I specify height to jQuery data table row so that it only show 2 line. Right now height is adjusted according to length of text.</p>
  
  <p>This is my jQuery table</p>
  
  <pre><code>&lt;div id="comments"&gt;
   &lt;c:choose&gt;
   &lt;c:when test="${null ne comments and not empty comments}"&gt;
    &lt;table id="dataTable2" cellpadding="0" cellspacing="0" border="0" class="display" style="width:100%;"&gt;
      &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Id&lt;/th&gt;
          &lt;th width="15%"&gt;User&lt;/th&gt; 
          &lt;th width="15%"&gt;Role&lt;/th&gt;       
          &lt;th width="45%"&gt;Comment&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
      &lt;tbody&gt;
          &lt;c:forEach items="${comm}" var="comm" varStatus="status"&gt;
              &lt;tr&gt;&lt;td&gt;${comment.commentId}&lt;/td&gt;
              &lt;td width="15%"&gt;${comm.userFullName}&lt;/td&gt;
              &lt;td width="15%"&gt;${comm.userRoleName}&lt;/td&gt;
              &lt;td width="45%" style="height:20px" class="ellipsis multiline"&gt;${comm.CommentAbbreviation}&lt;/td&gt;&lt;/tr&gt;
          &lt;/c:forEach&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
   &lt;/c:when&gt;&lt;/c:choose&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery.autoellipsis.js</p>
  
  <pre><code>(function($) {
  $.fn.ellipsis = function()
  {
      return this.each(function()
      {
      var el = $(this);
  
          if(el.css("overflow") == "hidden")
          {
          var text = el.html();
          var multiline = el.hasClass('multiline');
          var t = $(this.cloneNode(true))
                  .hide()
                  .css('position', 'absolute')
                  .css('overflow', 'visible')
                  .width(multiline ? el.width() : 'auto')
                  .height(multiline ? 'auto' : el.height());
  
  el.after(t);
  
  function height() { return t.height() &gt; el.height(); };
  function width() { return t.width() &gt; el.width(); };
  
  var func = multiline ? height : width;
  
  while (text.length &gt; 0 &amp;&amp; func())
  {
          text = text.substr(0, text.length - 1);
          t.html(text + "...");
  }
  
  el.html(t.html());
  t.remove();
              }
          });
  };
  })(jQuery);
  </code></pre>
  
  <p>css class </p>
  
  <pre><code>.ellipsis {
          white-space: nowrap;
          overflow: hidden;
  }
  
  .ellipsis.multiline {
          white-space: normal;
  }
  </code></pre>
  
  <p>How should I set height to datatable row ?</p>