Question

我目前正在使用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函数。

Answer 1

我可能需要更严格的要求才能为您提供更好/更强大的代码。但我认为这样的东西就是你要找的东西。

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>

Answer 2

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

Answer 3

这很容易挤柠檬皮......

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;

Answer 4

这是一段使用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

Answer 5

我最近做了类似的事情，它在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();

如何计算省略号后的单词

5 个答案: