As shown in the Image, truncate happens for all the Category tag component. I want to ensure that only the last few tags will get truncate and if it get truncated to really small tags for instance C… then I don’t have to show that tag in the card.

<span
      className=
        'cursor-pointer rounded-3xl px-3 py-1 text-xs font-medium text-light-primary/80 dark:text-dark-primary/80 overflow-hidden whitespace-nowrap truncate'
    >
      {category}
</span>

Can somebody tell me how I can implment this idea ?

I am actually not able to come with an idea on how to implement it.