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

Question

我有一个HTML元素，它包含一个同义词列表。我只希望显示前5个同义词。

在下面的示例中，我可以使用CSS隐藏每个元素的第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>

​