如何将 <td> 限制为三行？

Question

我想在我的所有表格行中实现统一的外观和感觉。 当您查看下面的示例时，您会发现中间的注释超过了 4 行，这不是那么漂亮。

我希望将所有 <td> 限制为 3 行。

如果要显示的内容多于三行，那么它应该用... [click for more]剪切内容并将内容放在collapseable element中，这样当点击它时它会显示整个内容。

后者应该没问题，但是如何将内容限制为三行呢？我应该计算角色来做出决定吗？有更好的策略吗？顺便说一句，我正在使用 Django，但我很乐意使用 javascript、jquery 或任何 css 魔法来解决这个问题。

更新：

接受的答案非常好。但是，它带有一个警告，这并不容易解决。 如果你有一个相邻的 td 已经超过了三行，而当前的 td 只有两行，我们将得到一个无限的 while 循环。

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

由于$(this).innerHeight() 不能减小，因为相邻单元格将高度保持在高位。我认为如果有可能获取当前 td 的 css 并将其完全复制到一个单独的字段中，相邻的 td 不会干扰，我们将获得最佳解决方案。

更新 2：

正如 Assad 所提到的，解决方案是在 td 的内容周围放置一个 div 包装器，并将类设置在 td 内的 div 上，而不是在 td 本身上。它完美无瑕。

Answer 1

假设您使用的是 jQuery，您可以使用以下方法找到所有超过一定行数的 td 元素：

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

然后您可以将可折叠元素应用于这些 td 元素。

这是一个演示（使用段落而不是tds）：http://jsfiddle.net/jM4ZY/1/

这是一个将内容截断以适合 3 行，然后添加更多按钮的示例：http://jsfiddle.net/jM4ZY/2/

就编辑而言，这很容易通过对内容使用内部包装来解决；可能是div 元素。然后您可以测量此元素的高度，该高度与相邻单元格的高度无关。

Answer 2

描述了另一个jQuery解决方案here

描述了如何通过计算显示文本中的字母数来更改文本。如果你不确定字母的数量，或者想让它依赖于文本长度，你可以使用这个片段来计算它

$.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;
};

我从Calculating text width那里得到的