根据可用空间自动调整明信片中的标签大小并隐藏标签

Question

如Image所示，所有Category标签组件都会发生截断。我想确保只有最后几个标签会被截断，如果它被截断为非常小的标签，例如 C...那么我就不必在卡片中显示该标签。

<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>

有人可以告诉我如何实现这个想法吗？

我实际上不知道如何实现它。

Answer 1

可能有效的一件事是限制明信片能够显示的标签数量（可能为 3-5），并可选择使用 (...) 标签隐藏其余标签。这应该允许显示的前几个标签有更多的文本空间，因此被截断的字符更少。

不确定这是否完全回答了您的问题，但我希望它有所帮助！