Javascript 如何限制a<；td>；只有三行吗？

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

我希望将所有

限制为3行

如果要显示的内容超过三行，则应使用

…剪切内容。。。[单击了解更多信息]

并将内容放在一个文件夹中，这样当单击它时，它将显示整个内容

后者应该不是问题，但我如何将内容限制为仅三行？我要数一数角色来做决定吗？有更好的策略吗？顺便说一下，我正在使用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包装器，并将类设置在

td

内部的

div

上，而不是

td

本身上。它可以完美地工作。

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

td

元素：

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

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

td

元素

下面是一个演示（使用段落而不是

td

s）：

下面是一个示例，它将内容切掉以适合3行，然后添加“更多”按钮：

---

就编辑而言，使用内容的内部包装器很容易解决这一问题；可能是

div

元素。然后，您可以测量该元素的高度，该高度与相邻单元格的高度无关。

介绍了另一种jQuery解决方案

描述了如何通过计算显示文本中的字母数来更改文本。如果您不确定字母的数量，或者希望使其取决于文本长度，则可以使用此截取值进行计算

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

$.fn.textWidth=函数（）{
var html_org=$（this.html（）；
var html_calc=''+html_org+''；
$（this）.html（html\u calc）；
var width=$（this.find（'span:first'）.width（）；
$（this.html（html_org）；
返回宽度；
};

---

这是我从

看到的，因为你没有使用固定字体，所以计数字符是不起作用的。“i”比“W”薄得多。更少的字符可能很容易超过您的3行要求。请看一看。即使您使用的是单空格字体，断点（空格/连字符）最终也会决定适合每行的字符数。文本的宽度在每行之间并不一致。此外，这是一个很好的解决方案，可以检测超过三行的内容+从我这里得到1。我已经将其应用到我的应用程序中，它突出了td的三条线。考虑到这一点，我可以轻松创建可折叠元素并将内容放在其中。唯一的问题是，如何可靠地将可折叠内容的标题中的文字切割为少于三行？@Kave假设您可以一次迭代删除10个字符，检查行数是否为3，并在需要时停止。不过，这在计算上相当繁重。@Kave我添加了一个例子，这非常聪明。非常感谢。我现在已经将它应用于具有特定id的指定

，因此计算不会针对每个td运行，因此我认为它是可以接受的。有一个警告，这不容易解决。我已经更新了问题。也许你有个主意。