选框文本 - 获取超出屏幕边界的像素长度

Question

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

我已将新闻Feed文本包装在div容器中。该文字具有CSS规则overflow: visible;和white-space: nowrap;设置。

但是当我尝试以像素为单位抓取文本的长度时：我只获得了视口的最大宽度。

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

只能达到浏览器的最大视口大小。

有没有办法确定文本的长度（以像素为单位），包括视口/屏幕以外的文字？

编辑：这是我的标记：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 节点。

Answer 2

使用您最喜欢的浏览器检查元素：