12

我想在我的所有表格行中实现统一的外观和感觉。当您查看下面的示例时，您会看到中间的注释超过 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 并将其完全复制到一个单独的字段中，相邻的 td 不会干扰，我们将获得最佳解决方案。

更新 2：

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

4

2 回答 2

5

假设您使用的是 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元素。然后，您可以测量此元素的高度，该高度与相邻单元格的高度无关。

于 2012-12-03T10:49:04.730 回答
1

此处描述了另一种 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;
};

我从计算文本宽度中获取的

于 2012-12-03T10:50:26.233 回答