How can I hide everything after the nth delimiter in an HTML element?

Question

I have an HTML element that contains a list of synonyms. I only want the first 5 synonyms to be displayed.

In the example shown below, can I use CSS to hide everything after and including the 5th comma for each element with the "synonyms" class?

Example:

 talkative, garrulous, voluble, over-talkative, long-winded, wordy, verbose

user_9513184 · Answer

This cannot be done with CSS, but you can use JavaScript to replace the textContent of those elements.

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

 talkative, garrulous, voluble, over-talkative, long-winded, wordy, verbose