Javascript 省略后如何计算单词数

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

.name{
边框：1px实心#000000；
空白：nowrap；
宽度：X；
溢出：隐藏；
文本溢出：省略号；
}
蒂姆，汤姆，玛丽，鲍勃，萨姆，约翰

显示

蒂姆、汤姆、玛丽

但是，在本例中，我想显示省略号代表其他3个名称

蒂姆、汤姆、玛丽。。。和其他3人

---

在javascript或css中，最简单的方法是什么。我在iOS应用程序中使用webview，必须对表中的每一行项目进行计算，因此我需要一个非常轻量级的js函数。

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

我知道的唯一方法是一次添加一个单词，并在移动过程中测量元素的高度。当高度变化时，你已经达到了极限…

这很容易挤压柠檬豌豆

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;

---

那很容易挤柠檬豌豆

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;

---

我可能需要更严格的要求，以便为您提供更好/更健壮的代码。但我想这就是你想要的

我不知道你目前是如何处理你的代码问题的，但是如果你没有面对H。。。也就是说，无论你使用什么字体，字符宽度都很可能不是恒定不变的，这就产生了一些问题

var名称；
$（文档）.ready（函数（）{
名称=$（'p.test'）.text（）.split（'，'）；
对于（i=0；i100）{
打破
}
}
$（'p.test2'）.append（'..和'+（names.length-i+1）+'others'）；
});
p.test{
宽度：100px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
p、 测试2{
浮动：左；
}

汤姆、鲍勃、哈里、迪克、约翰、詹姆斯、史密斯、保罗


我可能需要更严格的要求，以便为此提供更好/更健壮的代码。但我想这就是你想要的


我不知道你目前是如何处理你的代码问题的，但是如果你没有面对H。。。也就是说，无论你使用什么字体，字符宽度都很可能不是恒定不变的，这就产生了一些问题


var名称；
$（文档）.ready（函数（）{
名称=$（'p.test'）.text（）.split（'，'）；
对于（i=0；i100）{
打破
}
}
$（'p.test2'）.append（'..和'+（names.length-i+1）+'others'）；
});
p.test{
宽度：100px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
p、 测试2{
浮动：左；
}

汤姆、鲍勃、哈里、迪克、约翰、詹姆斯、史密斯、保罗


下面是一段引导代码，用于处理CSS规则。它检查
width（）
是否大于父级
div
，如果溢出，则显示
和X个其他

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


#容器{宽度：170px；空白：nowrap；溢出：隐藏；文本溢出：省略号；}
#单词{显示：内联}
玛丽
var namesAfterEllipsis=0；
函数addName（）{
$（“单词”）。附加（“，Tom”）；
如果（$（“#单词”）.width（）>=$（“#容器”）.width（））
$（“#其他”）.html（“和”+++名称后省略+“其他”+（名称后省略>1？：”）；
}

您可以看到它正在运行
这里是一段引导代码，用于处理CSS规则。它检查
width（）
是否大于父级
div
，如果溢出，则显示
和X个其他

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


#容器{宽度：170px；空白：nowrap；溢出：隐藏；文本溢出：省略号；}
#单词{显示：内联}
玛丽
var namesAfterEllipsis=0；
函数addName（）{
$（“单词”）。附加（“，Tom”）；
如果（$（“#单词”）.width（）>=$（“#容器”）.width（））
$（“#其他”）.html（“和”+++名称后省略+“其他”+（名称后省略>1？：”）；
}

你可以看到它在运行
我最近做了类似的事情，它在Android上的
WebView
中运行良好。从内存（使用jQuery，但可以很容易地进行调整）：

我最近做了类似的事情，它在Android上的
WebView
中运行良好。从内存（使用jQuery，但可以很容易地进行调整）：

这是一种简化，假设您的字符串总是非空的，并且总是有省略号。对不起，我指的是原始字符串中被省略号截断的字数。我更新了我的问题以反映这一点。这是一种简化，假设您的字符串始终为非空且始终具有省略号。很抱歉，我指的是原始字符串中被省略号截断的字数。我更新了我的问题以反映这一点。很酷，几乎有效。一个小错误是使用names.length-（i+1）来获得正确数量的其他错误。我认为这加上一些测试，以确保只有在创建省略号时才运行它，这样我才能始终编写names.length-I+1。我不知道这次我为什么做错了（修正了。很酷，几乎可以工作。一个小错误是做n