选取框文本 - 以屏幕边界以外的像素为单位获取文本的长度

我试图获取从页面的一侧滚动到另一侧的新闻订阅源的长度。我需要以像素为单位计算文本的宽度，以确定何时在开始时重新定位。选取框文本 - 以屏幕边界以外的像素为单位获取文本的长度

我已经在div容器中包装了新闻提要文本。该文本具有CSS规则overflow: visible;和white-space: nowrap;集。

但是，当我试图抓住像素文本的长度：我只得到我的视口的最大宽度。

我用下面的jQuery抢长度：$(".scroll-text").width();

认为只有上升到我的浏览器的最大视口大小。

有什么方法来确定文本的长度以像素为单位，包括文本关闭视窗/屏幕？

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

消息你可以举报该职位的重复：

这是不是重复。关于屏幕边界之外的像素长度没有问题。

来源

2014-04-02 Alexander Johansen

你能分享你的HTML标记，以便我们可以看到如何实现选取框吗？ – Shiva

@Shiva添加标记链接。 –

检查元素与你喜欢的浏览器：

563px width in this case

来源

2014-04-02 07:08:40

当我这样做：它实际上显示它应该得到正确的宽度。但出于某种原因：jQuery在屏幕宽度处裁剪。 –

请告诉我们什么css应用于'body'和'html'，你的html开始标记（你的第一行模板），以及你是否使用关于视口的元标记。 –

第162行有语法错误：请删除'}）;'。下一步：你必须引用id，而不是类，尝试'$（“＃scroll-text”）。width（）;'。请分享您的结果。 –

我花了永远寻找，但也许你想在我的答案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节点。

来源

2014-04-02 07:15:06

我收到以下错误，当我运行此脚本：http://puu.sh/7T1eO.png一边但是错误：它似乎工作。我还没有为我的字幕文本测试它。支持。 –

对不起。似乎无法得到它的工作。当我尝试使用它时，我得到一个'NaN'值。 –

@DJZorrow“0xFF”基本上是指“前256个字符”。你使用非ASCII/ANSI字符（它们会超出此范围）？ –

选取框文本 - 以屏幕边界以外的像素为单位获取文本的长度

回答

相关问题