Question

我们正在显示表格顶部的主题列表，因为宽度不同，列宽会变大或变小。我们希望将其保持为恒定大小，并且可能在末尾添加点后缀以保持其不变。我们如何动态地做到这一点。

e.g。主题名称可以是数学，科学，英语，历史，生物学，环境科学......

我们希望它们被渲染为Mathema ...，Science，History，Biology，Environ ...（我希望格式化发生在客户端，我不希望服务器端格式化这些字符串）。我们怎么做？

Answer 1

为什么不完全用CSS？

这可以使用CSS完成，并避免任何客户端处理。如果您想加快表格渲染速度，您还可以将表格table-layout设置为固定，这将阻止表格单元格根据内容重新计算维度。如果你可以保证你的内容真正适合，它会更快地呈现表格（尤其是长表格）。

反正。这是一些CSS：

table
{
  table-layout: fixed;
}

td
{
  width: 50px; /* set this to whatever width you'd like */
  overflow: hidden;
  text-overflow: ellipsis; /* IE, Safari, Chrome */
  -o-text-overflow: ellipsis; /* this one's for Opera */
  white-space: nowrap;
}

这将在IE，Chrome，Opera和Safari中正确显示。但FF不会显示它。但也有一个解决方法。有关于Mozilla's web site的信息。它说-moz-binding可以用来达到这个目的。 this blog post向您展示了如何操作。

Javascript方法

但是如果您想采用脚本方法，我建议您在一定数量的字符后不要破坏该字，因为根据其中使用的字母，您最终会得到各种长度的字。 “WMWMWM”比“IIIIII”长得多，即使它们都是6个字符长。

最好的办法是这样做：

创建一个绝对定位和隐藏的虚拟（通过可见性和不显示）div，但保持其字体样式与表格单元格完全相同。
遍历所有单元格并为每个单元格循环：
1. 拿一个牢房
2. 将单元格内容复制到div
3. 检查div宽度是否适合宽度，是否将其内容复制回单元格并返回步骤1
4. 删除最后一个字符并附上省略号
5. 转到第3步

这样，您最终会在符合单元格宽度的单元格中找到最长的字符串。因此，如果某些单词具有宽的字母（如m，w）或非常窄的字母（i），则它将正确地剪切字符串，并且仅在需要时。

Answer 2

你已经标记了jQuery，所以这里是jQuery答案：

$(document).ready(function() {

    $("table th").each(function() {
        var text = $(this).text();
        if (text.length > 7) {
           $(this).text(text .slice(0,7) + "...");
        }

    });

});

这是一个working fiddle供您查看。

Answer 3

var str = 'Mathematics';

if (str.length > 7) {
   str = str.slice(0,7) + '...';
}
// str == 'Mathema...' is true...

var str = ['Mathematics', 'Science', 'English', 'History', 'Biology', 'Environmental Science'];

for (i=0;i<str.length;i++)
   if (str[i].length > 7) {
      str[i] = str[i].slice(0,7) + '...'
   }
// str == ['Mathema...' , 'Science', 'History', 'Biology', 'Environ...']

提供更多详细信息，我们可以获得更多信息...

我们如何将单元格大小格式化为常量

3 个答案:

为什么不完全用CSS？

Javascript方法