省略記号の後に単語を数える方法

私は現在、行の最後に省略記号を追加するために省略記号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人の他の名前を表していることを示したいと思います。

これを行うための最小限の方法ではJavaScriptやCSSのいずれかで、何ティム、トム、メアリー、...他3

。私は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

涼しい、ほとんどの作品。 1つの小さなバグは、名前をつけることです。長さ - （i + 1）人の正しい数を得るためです。私はこれに加えて、省略記号が作成されたときにのみこれを実行するようにいくつかのテストを行ったと思う。 – MonkeyBonkey

私はいつもnames.length - i + 1と書く。：（一定。 – Sanchit

私がこれを行うために知っている唯一の方法は、単語を1つずつ追加して、要素の高さを測定することです。高さの変更は、あなたの限界に達したら...

出典

2012-04-24 12:28:47 Alnitak

+1 ...同じことが判明しました。私が最近それをどのように解決したかの簡単な例を投稿しました。 –

簡単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

これは、あなたの文字列が常にnullでなく、省略記号を持つことを前提とした単純化です。 –

申し訳ありませんが、私は元の文字列の省略記号で途切れた単語の数を意味していました。私はそれを反映するために私の質問を更新しました。 – MonkeyBonkey

ここには、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

実行見ることができ、それは、Android上でWebViewに適しています。メモリから（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

省略記号の後に単語を数える方法

答えて

関連する問題