jquery - 我们如何将单元格大小设置为恒定

Question

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

例如主题名称可以是数学、科学、英语、历史、生物学、环境科学...

我们希望它们被渲染为数学...、科学、历史、生物学、环境...(我希望格式化发生在客户端，我不希望服务器端格式化这些字符串)。我们如何做到这一点？

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 上有关于 if 的信息。它说 -moz-binding 可用于实现此目的。和this blog post向您展示如何做到这一点。

Javascript 方法

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

最好的方法是这样做:

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

这样，您将在适合单元格宽度的单元格中得到最长的字符串。因此，如果某个单词包含较宽的字母(如 m、w)或非常窄的字母(i)，它只会在需要时正确剪辑字符串。