如何計算省略號後的單詞

我正在使用css屬性省略號將省略號添加到我的行末。但是，我還想顯示省略號後的單詞數。例如如何計算省略號後的單詞

.names { 
    border: 1px solid #000000; 
    white-space: nowrap; 
    width: X; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

<div class="names">Tim, Tom, Mary, Bob, Sam, John</div>

顯示

蒂姆，湯姆，瑪麗，...

但是，在這種情況下，我想表明省略號代表其他3名。

蒂姆，湯姆，瑪麗，... 3人

什麼要做到這一點，無論是在JavaScript或CSS與最小的方式。我在iOS應用程序中使用webview，這將不得不計算表中的每個行項目，所以我需要一個非常輕量級的js函數。

來源

2012-04-24 MonkeyBonkey

爲了給你一個更好/更我可能需要更多的剛性需求健壯的代碼。但我認爲這是你正在尋找的東西。

http://jsfiddle.net/Xf47e/3/

我不知道你是如何處理當前與您的代碼的問題，但我會感到驚訝，如果你還沒有遇到H的問題...又名半切詞已經以及因爲字符寬度很可能與您使用的任何字體不一致而產生的許多其他問題。

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<style> 
p.test { 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
p.test2 { 
    float:left; 
} 
</style> 
<script> 
var names; 
$(document).ready(function() { 
    names = $('p.test').text().split(','); 
    for (i=0; i<names.length; i++) { 
     if (i<names.length-1) 
      $('p.test2').append(names[i]+','); 
     else 
      $('p.test2').append(names[i]); 
     console.log(i+" "+$('p.test2').width()); 
     if ($('p.test2').width()>100) { 
      break; 
     } 
    } 
    $('p.test2').append(' ... and '+(names.length-i+1)+' others.'); 
}); 
</script> 
</head> 
<body> 
<div> 
    <p class="test">Tom, Bob, Harry, Dick, John, James, Smith, Paul</p> 
    <p class="test2"></p> 
</div> 
</body> 
</html>

來源

2012-04-24 12:55:03 Sanchit

很酷，幾乎可以工作。一個小錯誤是做names.length - （i + 1）來獲得正確數量的其他人。我認爲這加上一些測試，以確保只有當創建省略號時才能運行此工作 – MonkeyBonkey 2012-04-24 17:03:59

我總是寫names.length - i + 1.我不知道爲什麼我這次做錯了。 :(修正。 – Sanchit 2012-04-26 03:19:16

我知道要做到這一點的唯一方法是一次添加一個單詞，並隨時測量元素的高度。當高度變化，您已經達到限額...

來源

2012-04-24 12:28:47 Alnitak

+1 ...我發現同樣的事情是這樣的。張貼了我最近如何解決問題的簡單例子。 – 2012-04-26 03:48:55

這很容易squeezy檸檬peasy ...

var orginalStr = "Tim, Tom, Mary, Bob, Sam, John"; 
var elStr = "Tim, Tom, Mary, ...".substring(0, "Tim, Tom, Mary, ...".indexOf("...")); 
//That should give you "Tim, Tom, Mary, "; 
var count = originalStr.replace(elStr, "").split(",").length;

來源

2012-04-24 12:30:46

我會說相同^^ – Thkru 2012-04-24 12:32:49

這是一個簡化，假設你的字符串總是非空並且總是有省略號。 – 2012-04-24 12:42:32

對不起，我的意思是我原始字符串中被省略號切斷的單詞數。我更新了我的問題以反映這一點。 – MonkeyBonkey 2012-04-24 16:50:54

這是一段引導的代碼，它使用CSS規則。它檢查width()是否比父div大，如果溢出則顯示and X others。

<style> 
    #container {width: 170px;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;} 
    #words {display: inline} 
</style> 
<div id="container"><div id="words">Mary</div></div><div id="others"></div> 
<input type="button" onclick="addName();" value="add" /> 
<script> 
var namesAfterEllipsis = 0; 
function addName() { 
    $("#words").append(", Tom"); 
    if ($("#words").width() >= $("#container").width()) 
    $("#others").html("and " + ++namesAfterEllipsis + " other" + (namesAfterEllipsis > 1 ? "s" : "")); 
} 
</script>

你可以看到它運行there

來源

2012-04-24 13:12:39

我最近做了這樣的事情，而且運作良好的WebView Android上。從內存（使用jQuery，但可以很容易地適應）：

var names = $('.names'); 
names.data('original', names.text()); 
names.data('truncated', 0); 

function truncate() { 
    var n = names[0], t = names.text(); 
    if (n.scrollWidth > n.clientWidth) { 
     names.data('truncated', names.data('truncated') + 1); 
     names.text(t.substring(0, t.lastIndexOf(' '))); 
     // remove one word, and let the DOM update 
     setTimeout(truncate); 
    } else { 
     // set the text back to the original value 
     // names.data('truncated') should now have the number of truncated words 
     names.text(names.data('original')); 
    } 
} 

truncate();

來源

2012-04-26 03:48:01

如何計算省略號後的單詞

回答

相關問題