javascript - 如何将 <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 并将其完全复制到一个单独的字段中的内容中，相邻的 tds 不会干扰，我们将获得最佳解决方案。

更新 2:

正如阿萨德所说，解决方案是在 td 的内容周围放置一个 div 包装器并在 div 上设置类(class)在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 元素。

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

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

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