node.js – 计算服务器端的文本宽度(以像素为单位)

2023年4月26日 228次阅读

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

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应用程序中运行.

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

最佳答案 你无法真正依赖客户端会发生什么.即使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/

点赞