[Solved]-How to limit a <td> to only three lines?

by

5👍

✅

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.

👤Asad Saeeduddin

1👍

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

👤HashtagMarkus

Leave a comment