Javascript 浏览器中每个字符的渲染像素宽度数据'；s字体

我有一个表列，需要限制在一定的宽度-例如100像素。该列中的文本有时比该列宽，并且不包含空格。例如：

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

我想计算服务器端文本的宽度，并在正确的字符数后添加省略号。问题是我没有关于文本渲染大小的数据

例如，假设浏览器是Firefox3，字体是12px Arial。字母“a”的宽度是多少，字母“b”的宽度是多少，等等

你有显示每个字符像素宽度的数据吗？还是一个生成它的程序

---

我认为一个聪明的一次性javascript脚本可以做到这一点。但我不想花时间重新发明轮子，如果其他人已经这样做了。我肯定不是第一个遇到这个问题的人。

服务器端很难做到。您永远不可能知道用户安装了什么字体，而且有许多因素会影响文本的显示

请尝试以下方法：

table-layout: fixed;

---

这将确保表永远不会超过您指定的大小。

溢出：滚动如何？

这不仅无法在服务器端执行，而且也没有意义。您不知道客户端将使用什么浏览器，也不知道客户端的哪些字体设置将覆盖您分配给HTML的任何样式信息。您可能认为您在样式属性中使用的是绝对定位像素，但客户端可能只是忽略这些像素，或者使用一些插件来缩放所有内容，因为客户端使用的是高dpi屏幕

---

使用固定宽度通常是个坏主意。

这在服务器端根本不可能做到。除了人们安装了不同字体的问题外，你还需要字距调整（字母“f”将根据其旁边的内容占用不同的空间）和字体呈现选项（cleartype是否启用了“大字体”）。

你可以将文本放入一个不可见的范围内，并读取该范围内的文本，但基本上这看起来像是有人试图破坏你的网站，因此我建议禁止文字长度超过一定长度的帖子，例如30个字符没有空格（允许链接更长！）

--但简单的方法是在表单元格中放置一个块元素：

<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td>

一个非常长的文本字符串，像这样的，没有行的，断开的，组成了。。。

---

这将有效地防止桌子凌乱！o]

服务器端无法计算它。您只需使用浏览器标识字符串，它可能会准确地告诉您用户的操作系统和浏览器，也可能不会。您还可以“询问”（通过字体标签或CSS）某个字体用于显示文本，但不能保证用户已安装该字体。除此之外，用户可以在操作系统级别使用不同的DPI设置，或者可以通过浏览器缩放功能使文本变大或变小，或者可以完全使用自己的样式表。

有一个模块来实现这一点

提供精确的像素测量 用于文本块，以便 确定准确的高度和宽度， 以像素为单位，给定的文本块将 是

---

我确信还有其他可用的库也可以做到这一点。

这是我提出的客户端解决方案。这是非常具体的我的应用程序，但我在这里分享它，以防其他人遇到同样的问题

它比我预想的要快一点。它假设单元格的内容仅为文本-任何HTML格式都将在缩短过程中被删除

它需要jQuery

function fixFatColumns() {
  $('table#MyTable td').each(function() {
    var defined_width = $(this).attr('width');
    if (defined_width) {
      var actual_width = $(this).width();
      var contents = $(this).html();
      if (contents.length) {
        var working_div = $('#ATempDiv');
        if (working_div.is('*')) {
          working_div.html(contents);
        } else {
          $('body').append('<div id="ATempDiv" style="position:absolute;top:-100px;left:-500px;font-size:13px;font-family:Arial">'+contents+'</div>');
          working_div = $('#ATempDiv');
        }

        if (working_div.width() > defined_width) {
          contents = working_div.text();
          working_div.text(contents);
          while (working_div.width() + 8 > defined_width) {
            // shorten the contents of the columns
            var working_text = working_div.text();
            if (working_text.length > 1) working_text = working_text.substr(0,working_text.length-1);
            working_div.text(working_text);
          }
          $(this).html(working_text+'...')
        }

        working_div.empty();
      }

    }
  });

}

函数fixFatColumns（）{
$（'table#MyTable td'）。每个（函数（）{
var defined_width=$（this.attr（'width'）；
如果（定义的宽度）{
var实际宽度=$（this）.width（）；
var contents=$（this.html（）；
if（contents.length）{
var-working_div=$（'ATempDiv'）；
如果（工作分区为（'*'））{
工作分区html（目录）；
}否则{
$（'body'）。追加（''+内容+''）；
工作分区=$（'ATempDiv'）；
}
if（工作分区宽度（）>定义的分区宽度）{
contents=working_div.text（）；
工作组文本（内容）；
同时（工作分区宽度（）+8>定义的分区宽度）{
//缩短列的内容
var working_text=working_div.text（）；
如果（working_text.length>1）working_text=working_text.substr（0，working_text.length-1）；
工作区文本（工作区文本）；
}
$（this.html（工作文本+'…'））
}
工作分区空（）；
}
}
});
}

如果您认为这不适用于FireFox，为什么不直接使用CSS呢？具有表布局的表：固定，有问题的列具有溢出：隐藏；文本溢出：省略号；空白：nowrap

http://www.css3.info/preview/text-overflow/

---

这是css3的一个新功能。

一些用户有较大或较小的默认字体设置。您不能在服务器上执行此操作。您只能在浏览器呈现页面后进行测量。

由于字体大小可以在浏览器端轻松更改，因此您的服务器端计算很容易无效

客户端的一个快速修复方法是使用溢出属性设置单元格样式：

td
{
    overflow: scroll; /* or overflow: hidden;  etc. */
}

更好的选择是截断字符串服务器端，并提供一个简单的javascript工具提示，可以显示更长的版本。“展开”按钮也可能有助于在叠加div中显示结果。

您需要的是标签。这是一个特殊的HTML标记，它告诉浏览器，如果需要换行符，可以在此处打断单词。我不会在文本中注入永久性存储，因为这样您就是coup了