2

我目前正在使用 css 属性 ellipsis 在行尾添加一个省略号。但是，我还想显示省略号后的单词数。例如

.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 函数。

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

我知道这样做的唯一方法是一次添加一个单词，然后测量元素的高度。当高度发生变化时，你已经达到了极限......

于 2012-04-24T12:28:47.467 回答
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 回答
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 回答