Question

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

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应用程序中使用。

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

Answer 1

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

Answer 2

你无法真正依赖客户端会发生的事情。即使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 个答案: