以像素为单位计算服务器端的文本宽度答案

【问题标题】：Calculate text width in pixels server-side以像素为单位计算服务器端的文本宽度
【发布时间】：2013-03-10 03:10:33
【问题描述】：

我正在尝试在我的服务器上使用以下代码来估计一些文本字段的长度，并可能在通过电子邮件发送它们之前对其进行修剪...

String.prototype.visualLength = function()
{
    var element = document.createElement("span");
    element.css({
        "visibility": "hidden",
        "white-space": "nowrap",
        "font-weight": "normal",
        "font-size": "18px",
        "line-height": "40px",
        "font-family": "Helvetica, Arial, sans-serif",
        "text-decoration": "none"
    });
    document.body.appendChild(element);
    element.innerHTML = this;
    return element.offsetWidth;
};

String.prototype.trimToPx = function(length)
{
    var tmp = this;
    var trimmed = this;
    if (tmp.visualLength() > length)
    {
        trimmed += "...";
        while (trimmed.visualLength() > length)
        {
            tmp = tmp.substring(0, tmp.length-1);
            trimmed = tmp + "...";
        }
    };
    return trimmed;
};

显然我收到了一个错误，因为“文档”没有在服务器端定义。我添加了 Meteor 包 htmljs 和 domutils 希望他们可以解决这个问题，但徒劳无功。而且我无法添加 Node.js 包 jsdom，因为显然它在部署的 Meteor 应用程序中不起作用。

知道如何实现我想要做的事情吗？

【问题讨论】：

您通过限制文本试图达到的目标是什么？（试图理解为什么像素长度与字符长度）
@Rahul 不，我没有尝试过 phantomjs。不知道。只是看看......不知道如何用幻影解决这个问题。另外，它可以作为 Meteor 包提供吗？
@alanning 的目标是不超过我正在使用的 HTML 电子邮件模板的最大宽度。现在我正在用字符长度限制来实现它，但这是次优的（“M”比“i”宽得多，除非我使用等宽字体......）

标签： node.js meteor

【解决方案1】：

您不能真正依赖客户端会发生什么。甚至 Ubuntu 和 Windows 显示的字体也不同，因为提示、抗锯齿不同，它们可能会影响显示的大小。

如果你修改你的span的css如下，当它有一个大于所需空间的文本时，无论如何，剩余的将显示为...

max-width: 10%;
border: 1px #000 solid; // JUST TO SEE the effect clearly
width: 10%;
overflow: hidden;
height: 20px;
text-overflow: ellipsis;
display: block;
white-space: nowrap;

** 请注意你需要一个合适的高度值，否则文字会落到底部，你想要的就达不到了。

试试http://jsfiddle.net/sG6H2/

【讨论】：

不确定大多数邮件客户端是否支持此省略号属性...很遗憾。

【解决方案2】：

我认为这是不可能的。在 node.js 中运行的服务器端代码不在 Web 浏览器渲染环境的上下文中运行，因此无法访问浏览器的 DOM 以及可用的字体和显示配置。即使您成功运行代码并计算了一个数字，当我收到您的电子邮件时，该计算与我的设备无关。字体、显示大小和分辨率（可以是桌面，也可以是移动设备）、我自己的配置（例如我在桌面上的 Firefox 中设置了最小字体大小）等。而是尝试在 @987654321 中定义您的大小@ 单位而不是像素。

【讨论】：