2

現在、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アプリでWebビューを使用していますが、これはテーブル内のすべての行アイテムで計算される必要があるため、非常に軽量なjs関数が必要になります。

4

5 に答える 5

3

このためのより優れた/より堅牢なコードを提供するには、おそらくもっと厳格な要件が必要です。しかし、このようなものがあなたが探していたものだと思います。

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

現在、コードの問題にどのように対処しているかはわかりませんが、H の問題に直面していない場合は驚かれることでしょう...別名ハーフカットワードと、事実に伴って発生する他の多くの問題文字幅は、使用しているフォントで一定ではない可能性が高いです。

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.');
});
p.test {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

p.test2 {
  float: left;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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-24T12:55:03.663 に答える
1

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

于 2012-04-24T12:28:47.467 に答える
0

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-26T03:48:01.227 に答える
0

それは簡単な絞りレモンピーシーです...

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-24T12:30:46.043 に答える
0

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

あなたはそれがそこで走っているのを見ることができます

于 2012-04-24T13:12:39.023 に答える