How to Minimize Long Title or Overflowed text with less text followed with ellipsis using Jquery or CSS

While working on a project I got a requirement  of showing a limited amount of text followed with ellipsis(...)  in  a telerik grid, to do it I thought I will use the CSS property  text-overflow: ellipsis; but unable to succeed. I thought a lot and at last done it with CSS.

What I had done with CSS:
So in order to get the text as "Hello Hai how Are..." I used the following CSS

#divContainer td:first-child + td {height: 45px;width:280px;max-width: 280px;overflow: hidden;
text-overflow: ellipsis; display:block;white-space: nowrap;}

Here divContainer is the Container and td:first-child + td  : refers to the second column of a table. InOrder to make it work you need to specify the width,max-width(for IE), white-space and Overflow:hidden and text-overflow: ellipsis;

The output is:

 

 *Note: Here We get the desired result with single line only but I need multiple line with  ellipsis, so to do it I followed JQuery.


What I had done with JQuery:

In order to fix this issue I just write below the two line to get multiple lines followed with ellipsis(...)

$("#divContainer td:first-child + td").each(function() {
            $(this).text($(this).text().substr(0,75)+"...");
        });

The Output is: