使用jquery獲取省略號文本

不錯的代碼，只是想知道是否可以查詢並獲取省略號文本（即帶有點而不是原始文本）？使用jquery獲取省略號文本

如果我添加文本

這是一個長句子

和（使用省略號相關CSS），它被縮短到

這是一個漫長的仙...

有沒有辦法讓te xt

"This is a long sen ..."

來自$("p") DOM對象而不是原始文本？

來源

2014-01-13 ejectamenta

您是否在使用['text-overflow：ellipsis']（https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow）？不，CSS根據需要添加;它們實際上並不是DOM的一部分，因此無法使用JavaScript進行計算。 – Blazemonger

你指的是什麼「好代碼」？ –

我認爲@Blazemonger可能是對的，但爲什麼你需要它呢？也許有一種方法可以滿足你的要求。 –

I have a rough draft即需要一些瀏覽器特定的調整。

的JavaScript：

jQuery.fn.getShowingText = function() { 
    // Add temporary element for measuring character widths 
    $('body').append('<div id="Test" style="padding:0;border:0;height:auto;width:auto;position:absolute;display:none;"></div>'); 
    var longString = $(this).text(); 
    var eleWidth = $(this).innerWidth(); 
    var totalWidth = 0; 
    var totalString = ''; 
    var finished = false; 
    var ellipWidth = $('#Test').html('&hellip;').innerWidth(); 
    var offset = 7; // seems to differ based on browser (6 for Chrome and 7 for Firefox?) 
    for (var i = 0; 
    (i < longString.length) && ((totalWidth) < (eleWidth-offset)); i++) { 
     $('#Test').text(longString.charAt(i)); 
     totalWidth += $('#Test').innerWidth(); 
     totalString += longString.charAt(i); 
     if(i+1 === longString.length) 
     { 
      finished = true; 
     } 
    } 
    $('body').remove('#Test'); // Clean up temporary element 
    if(finished === false) 
    { 
     return totalString.substring(0,totalString.length-3)+"…"; 
    } 
    else 
    { 
     return longString; 
    } 
} 
console.log($('#ellDiv').getShowingText());

CSS：

#Test { 
    padding:0; 
    border:0; 
    height: auto; 
    width: auto; 
    position:absolute; 
    white-space: pre; 
} 
div { 
    width: 100px; 
    white-space: nowrap; 
    border: 1px solid #000; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    padding:0; 
}

需要提醒的是，offset需要根據不同的瀏覽器上更改，除非有人可以找出是什麼原因造成的。

我懷疑letter-spacing或類似嗎？

來源

2014-01-13 17:05:21

Nope http ：//jsfiddle.net/j08691/axHs8/2/。我所做的只是爲div中的單詞添加空格。 – j08691

偉大的腳本，但它不工作，如果這裏是多行。 – SearchForKnowledge

不適用於'Chrome 43.0.2357.130（64位）' –

使用jquery獲取省略號文本

回答

相關問題