javascript - 浏览器字体中每个字符的渲染像素宽度数据

Question

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

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

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

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

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

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

score 3 · Accepted Answer

3

溢出如何：滚动？

于 2008-10-02T14:52:52.700 回答

score 3 · Accepted Answer

Ext JS有一个模块可以做到这一点

TextMetrics 为文本块提供精确的像素测量值，以便您可以准确确定给定文本块的高度和宽度（以像素为单位）。

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

非常非常难做服务器端。您永远无法知道用户安装了哪些字体，影响文本显示的因素有很多。

试试这个：

table-layout: fixed;

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

score 1 · Accepted Answer

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

它的工作速度比我预期的要快一些。并且它假定单元格的内容仅为文本 - 任何 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();
      }

    }
  });

}

score 0 · Accepted Answer

这在服务器端基本上是不可能的。除了人们安装不同字体的问题外，您还有字距调整（字母“f”将根据旁边的内容占用不同的空间）和字体渲染选项（是否启用了 cleartype？“大字体“？）。

score 0 · Accepted Answer

您可以将文本放入一个不可见的跨度并阅读跨度宽度，但基本上这看起来像是有人试图破坏您的网站，因此我建议禁止使用超过特定长度的单词的帖子，例如 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]

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

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

这是css3的一个新功能。

于 2009-01-16T20:30:23.777 回答

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

你想要的是 <wbr> 标签。这是一个特殊的 HTML 标记，它告诉浏览器如果需要换行，可以在此处分词。我不会将其注入到文本中以进行持久存储，因为这样您就可以将数据与显示该数据的位置/方式相结合。然而，在以视图为中心的代码中注入标签服务器端是完全可以接受的（比如使用 JSP 标签或可能在控制器中）。我就是这样做的。只需使用一些正则表达式来查找比 X 个字符长的单词，并将每个 X 个字符的这个标签注入到这些单词中。

更新：我环顾四周，似乎所有浏览器都不支持 wbr。最值得注意的是，IE8。我自己还没有测试过。也许您可以使用溢出：隐藏作为备份或类似的东西。

javascript - 浏览器字体中每个字符的渲染像素宽度数据

13 回答 13

Related

Reference