如何隐藏HTML元素中第n个分隔符之后的所有内容?

Question

我有一个包含同义词列表的HTML元素。我只想显示前5个同义词。

在下面的示例中，我可以使用CSS隐藏每个元素的第5个逗号之后和包括第5个逗号的所有内容吗?课吗?

的例子:

<div class="synonyms"> talkative, garrulous, voluble, over-talkative, long-winded, wordy, verbose </div>

Answer 1

这不能用CSS来完成，但是你可以用JavaScript来替换这些元素的textContent。

document.querySelectorAll('.synonyms').forEach(d => {
d.textContent = d.textContent.split(", ").slice(0, 5).join(", ");
});

<div class="synonyms"> talkative, garrulous, voluble, over-talkative, long-winded, wordy, verbose </div>