選取框文本 - 以屏幕邊界以外的像素爲單位獲取文本的長度

我試圖獲取從頁面的一側滾動到另一側的新聞訂閱源的長度。我需要以像素爲單位計算文本的寬度，以確定何時在開始時重新定位。選取框文本 - 以屏幕邊界以外的像素爲單位獲取文本的長度

我已經在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字符（它們會超出此範圍）？ –

選取框文本 - 以屏幕邊界以外的像素爲單位獲取文本的長度

回答

相關問題