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

Posted 2023-02-24

【中文标题】如何将 <td> 限制为三行？

【英文标题】：How to limit a <td> to only three lines?

【发布时间】：2012-11-20 19:44:04

【问题描述】：

我想在我的所有表格行中实现统一的外观和感觉。 当您查看下面的示例时，您会发现中间的注释超过了 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 本身上。它完美无瑕。

【问题讨论】：

见***.com/questions/3922739/…

计算字符不起作用，因为您没有使用固定的字体。 “i”比“W”薄得多。较少的字符可能很容易超过您的 3 行要求。

***.com/questions/261368/… 看看。

即使您使用的是等宽字体，断点（空格/连字符）最终也会决定适合每行的字符数。

【参考方案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 元素。然后您可以测量此元素的高度，该高度与相邻单元格的高度无关。

【讨论】：

Asad，这是检测超过三行内容的好方法。 +1 来自我。我已将它应用到我的应用程序中，它突出显示了 td 超过三行。考虑到这一点，我可以轻松创建可折叠元素并将内容放入其中。唯一的问题仍然是如何可靠地将可折叠内容的标题的措辞减少到三行以内？

@Kave 假设您可以一次迭代地删除 10 个字符并检查行数是否为 3，并在达到时停止。不过，这将是相当繁重的计算。

@Kave 我添加了一个例子

这很聪明。谢谢你。我现在已经将它应用到具有特定 id 的指定 <td> 上，因此计算最终不会为每个 td 运行，因此我认为它是可以接受的。

有一个警告，这不容易解决。我已经更新了这个问题。也许你有一个想法。

【参考方案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那里得到的

【讨论】：

文本宽度跨行不一致。