12

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.

enter image description here

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.

enter image description here

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.

Houman
  • 64,245
  • 87
  • 278
  • 460
  • 1
    See http://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css – Simone Dec 03 '12 at 10:48
  • Counting the characters wont work since you are not using a fixed with font. The "i" is much thinner then the "W". Less characters might easily go over your 3 line requirement. – Damien Overeem Dec 03 '12 at 10:49
  • http://stackoverflow.com/questions/261368/find-the-number-of-tds-in-a-tr-without-using-id-or-name Take a look. – Harsha Venkataramu Dec 03 '12 at 10:49
  • Even if you were using a monospace font, the breakpoints (spaces/hyphens) would ultimately determine the the number of characters that fit in each line. – Asad Saeeduddin Dec 03 '12 at 10:51

2 Answers2

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
  • 46,193
  • 6
  • 90
  • 139
  • Asad, This is a good solution to detect the content over three lines. +1 from me. I have applied it to my app and it highlights the td's over three lines. WIth this in mind I could easily create the collapseable element and place the content inside. Only problem remains how to reliably cut the wording into less than three lines for the header of the collapseable content? – Houman Dec 03 '12 at 11:59
  • @Kave Is suppose you could iteratively remove 10 characters at a time and check if the number of lines is 3, and stop when it is. This would be pretty computationally heavy, though. – Asad Saeeduddin Dec 03 '12 at 12:01
  • @Kave I have added an example – Asad Saeeduddin Dec 03 '12 at 12:13
  • This is very clever. Thank you. I have applied it now on specified `` with a certain id, so that the computing doesn't end up to run for every td, and hence I think its acceptable. – Houman Dec 03 '12 at 13:16
  • there is caveat, that isn't easy to solve. I have updated the question. Maybe you have an idea. – Houman Dec 03 '12 at 15:22
  • @Kave Use a div wrapper inside your td. Measure the height of this div, not the td. – Asad Saeeduddin Dec 03 '12 at 15:38
  • Assad, you are star! It works. Thank you so much for all your help on this. – Houman Dec 03 '12 at 16:02
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

Community
  • 1
  • 1
HashtagMarkus
  • 1,641
  • 11
  • 20