javascript - 字幕文本 - 获取屏幕边界外的文本长度(以像素为单位)

Question

我正在尝试获取在页面上从一侧滚动到另一侧的新闻提要的长度。我需要计算文本的宽度(以像素为单位)以确定何时在开头重新定位。

我已将新闻提要文本包装在一个 div 容器中。文本设置了 CSS 规则 overflow: visible; 和 white-space: nowrap;。

但是当我尝试获取文本的像素长度时:我只能获取视口(viewport)的最大宽度。

我使用以下 jQuery 获取长度:$(".scroll-text").width();

这只会达到我浏览器的最大视口(viewport)大小。

有什么方法可以确定文本的长度(以像素为单位)，包括视口(viewport)/屏幕外的文本？

编辑:这是我的标记:http://pastebin.com/kTuMfZtd

---

可能会将此帖子标记为重复的消息:

它不是重复的。毫无疑问，关于屏幕边界外的像素长度。

Answer 1

我花了很长时间才找到，但也许您想要我的回答中的类似内容 here .

使用此代码，您可以找到文本的宽度，并据此计算字符串的宽度。

function charSizes(numChars, cssFont) {
    var span = document.createElement('span'),
        text = document.createTextNode(''),
        uia, i, j;
    span.appendChild(text);
    if (cssFont) span.style.font = cssFont;
    span.style.padding = span.style.margin = 'none';
    document.body.appendChild(span);
    numChars = (numChars || 255);
    uia = new Uint32Array(numChars * 2);
    for (j = i = 0; i < numChars; j = 2 * ++i) {
        text.data = String.fromCharCode(i);
        uia[j] = span.offsetWidth;
        uia[j + 1] = span.offsetHeight;
    }
    // free memory
    document.body.removeChild(span);
    span = text = numChars = cssFont = null;
    // output lookup function
    return function (c) {
        var i = c.charCodeAt(0) * 2;
        return {
            width: uia[i],
            height: uia[i + 1]
        };
    };
}

var defaultFont = charSizes(0xFF); // match the style of the text in your marquee
                                   // using the second parameter if necessary

现在

var str = 'foobar', i, len = 0;
for (i = 0; i < str.length; ++i) {
    len += defaultFont(str[i]).width;
}
len; // 36 pixels on this page

---

如果我们有关于您的标记的更多信息，您可能能够直接测量 DOM 中的 #text 节点。