How to limit a <td> to only three lines?

Question

I would like to achieve a unified look and feel across all my table rows. When you look at my example below you can see that the note in the middle goes over 4 lines and thats not so pretty.

I was hoping to limit all <td> to 3 lines.

If there is more to be shown than three lines, then it should cut the content with ... [click for more] and put the content inside a collapseable element, so that when clicked on it it would show the whole content.

The latter shouldn't be a problem, but how do I limit the content to only three lines? Shall I count the characters to make the decision upon that? Is there a better strategy? I am using Django by the way,but I am happy to use javascript, jquery or any css magic instead to solve this.

Update:

The accepted answer is very good. However it comes with a caveat, which isn't easy to solve. if you have a neighbouring td that already goes over three lines, while the current td is only two lines we will get an infinite while loop.

while($(this).innerHeight() / $(this).css('line-height').slice(0,-2) >= 3){ .. }

Since $(this).innerHeight() can't decrease because of the neighbouring cell holding the height up high. I think if it was possible to get the css of the current td and copy it across the content completely in a separate field, where neighbouring tds can't interfere, we would get the optimal solution.

Update 2:

As Assad mentioned, the solution is to put a div wrapper around the content of td and set the class on the div inside the td rather than on the td itself. It works flawlessly.

Answer 1

Assuming you are using jQuery, you could find all td elements that exceed a certain number of lines using:

$('td').filter(function(){
    return $(this).innerHeight() / $(this).css('line-height').slice(0,-2) > 3; //more than 3 lines
});

You could then apply collapsible elements to these td elements.

Here is a demonstration (using paragraphs instead of tds): http://jsfiddle.net/jM4ZY/1/

Here is an example of cutting off content to fit 3 lines, then adding a more button: http://jsfiddle.net/jM4ZY/2/

As far as the edit is concerned, this is easily resolved by using an inner wrapper for your content; possibly a div element. You can then measure the height of this element, which is independent of the height of neighboring cells.

Answer 2

Another jQuery solution is described here

It is described how to change the Text by counting the number of letters in the displayed text. If you are unsure about the number of letters, or want to make it dependent of the text-length you can calculate it by using this snipped

$.fn.textWidth = function(){
  var html_org = $(this).html();
  var html_calc = '<span>' + html_org + '</span>';
  $(this).html(html_calc);
  var width = $(this).find('span:first').width();
  $(this).html(html_org);
  return width;
};

which I took from Calculating text width