如何隐藏 HTML 元素中第 n 个分隔符之后的所有内容？ [复制]答案

【问题标题】：How can I hide everything after the nth delimiter in an HTML element? [duplicate]如何隐藏 HTML 元素中第 n 个分隔符之后的所有内容？ [复制]
【发布时间】：2021-09-29 21:22:33
【问题描述】：

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

在下面显示的示例中，我可以使用 CSS 来隐藏每个具有“同义词”类的元素（包括第 5 个逗号）之后的所有内容吗？

例子：

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

【问题讨论】：

标签： html

【解决方案1】：

这不能通过 CSS 完成，但您可以使用 JavaScript 替换这些元素的 textContent。

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

&lt;div class="synonyms"&gt; talkative, garrulous, voluble, over-talkative, long-winded, wordy, verbose &lt;/div&gt;

【讨论】：

谢谢！我不熟悉 JavaScript，但我尝试将此代码放在 html 文件的顶部，但它不适合我。你能告诉我我做错了什么吗？这就是我所拥有的：<script> document.querySelectorAll('.synonyms').forEach(d => { d.textContent = d.textContent.split(", ").slice(0, 5).join(", "); }); </script> <div class="synonyms">a, b, c, d, e, f, g, h</div>
@user17038038 你需要把它放在结束</body>标签之前或者把代码放在document.addEventListener("DOMContentLoaded", ()=>{/*...*/})里面。