如何使用CSS隐藏类名为synonyms的元素中第5个逗号及之后的内容

可以通过CSS实现该需求，根据你的场景可以选择以下三种不同方案：

方案1：无需修改DOM的近似实现（兼容性最好） #

如果对截断精度要求不高、同义词单词语长度差异不大，可以通过固定最大宽度+溢出隐藏实现：

.synonyms {
  /* 可根据实际视觉效果调整最大宽度，匹配5个同义词的占位长度 */
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  /* 可选：末尾显示省略号优化视觉效果 */
  text-overflow: ellipsis;
}

优点：不需要修改现有HTML结构，兼容所有主流浏览器；缺点：如果同义词单词长度波动较大，可能出现多截断或少截断的情况。

方案2：100%精准截断（仅需对DOM做微小改造） #

如果需要不受单词长度影响、完全精准只展示前5个同义词，建议给每个同义词套一层<span>标签，改造后的HTML结构如下：

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

之后通过CSS选择器直接隐藏第5个同义词之后的所有内容即可：

/* 隐藏第6个及之后的同义词，以及第5个同义词之后的所有内容 */
.synonyms span:nth-child(n+6),
.synonyms span:nth-child(5) ~ * {
  display: none;
}

优点：完全精准，不受同义词长度影响，兼容性好；缺点：需要对输出同义词的DOM结构做微小调整。

方案3：不改DOM也需要精准截断的补充方案 #

因为纯CSS没有文本内容解析能力，没办法直接识别文本中的逗号位置，如果既不想修改DOM又需要100%精准截断，可以配合几行JS实现：

document.querySelectorAll('.synonyms').forEach(el => {
  const synonymList = el.textContent.trim().split(', ')
  el.textContent = synonymList.slice(0, 5).join(', ')
  // 可选：如果同义词超过5个，末尾加省略号
  // if (synonymList.length > 5) el.textContent += '...'
})

内容的提问来源于stack exchange，提问作者user17038038