如何限制只有三行？

Question

我希望在所有表行中实现统一的外观。 当你看下面我的例子时，你可以看到中间的音符超过了4行而且不那么漂亮。

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

如果要显示的内容多于三行，则应使用... [click for more]剪切内容并将内容放在collapseable element内，以便点击它时会显示整个内容

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

更新

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

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

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

更新2：

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

Answer 1

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

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

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

以下是演示文稿（使用段落代替td s）：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

获取的