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

Question

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

我希望将所有内容限制<td>为3行.

如果要显示的内容多于三行,那么它应该剪切内容... [click for more]并将内容放在可折叠元素中,这样当单击它时它将显示整个内容.

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

更新:

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

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

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

更新2:

正如阿萨德所提到的,解决方案是在内容周围放置一个div包装器td,并将类设置在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元素.

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

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

就编辑而言,通过使用内容的内部包装器可以轻松解决此问题; 可能是一个div元素.然后,您可以测量此元素的高度,该高度与相邻单元格的高度无关.