在 React 中显示多个标签，超出省略并可以 hover 显示更多

📝

内容提要

文章讲解了如何在多行中显示多个标签，并在超出范围时用省略号替代。通过 JavaScript 计算哪些标签超出范围，并为省略号留出空间。需要频繁调整时，需重新计算隐藏标签的位置。

🎯

关键要点

• 文章讨论如何在多行中显示多个标签，超出范围时用省略号替代。

• 单个标签无法截断和换行，需要通过 JavaScript 计算超出范围的标签。

• 设定容器的固定宽度和高度，超出部分隐藏。

• 默认渲染所有标签，查找超出容器高度的标签。

• 计算省略号的位置时需考虑前面标签的宽度。

• 频繁增删标签时需重新计算隐藏标签的位置。

🔎

延伸解读

标签显示的技术挑战

在实现多个标签的显示时，单个标签无法像文本那样自动换行，这使得开发者需要依赖 JavaScript 进行复杂的计算。特别是在标签数量变化频繁的情况下，如何准确计算超出范围的标签并留出省略号的空间，成为了一个技术挑战。

容器设置的重要性

设定容器的固定宽度和高度是实现标签省略效果的关键。容器的高度需要精确到能够显示的行数，这样才能有效隐藏超出部分。如果容器设置不当，可能导致标签显示不全或省略号位置错误，影响用户体验。

动态调整的必要性

在标签频繁增删的场景中，开发者必须重新计算隐藏标签的位置。这意味着在设计时需要考虑到动态调整的逻辑，以确保用户始终能看到正确的标签和省略号。这种动态性增加了实现的复杂度，但也是提升用户体验的必要步骤。

❓

延伸问答

如何在 React 中处理标签超出范围的情况？

需要通过 JavaScript 计算哪些标签超出范围，并留出空间给省略号，设定容器的固定宽度和高度，超出部分隐藏。

为什么单个标签无法截断和换行？

单个标签无法截断和换行是因为它不像文本那样有原生的 CSS 属性支持。

在计算省略号位置时需要考虑哪些因素？

需要考虑前面标签的宽度以及最后一行剩余的空间，以确保省略号不会被挤下去。

如何重新计算隐藏标签的位置？

需要重新显示所有标签，然后重新计算哪些标签超出范围，以便更新隐藏标签的位置。

在设置容器时需要注意哪些参数？

需要设定容器的固定宽度和高度，以确保超出部分能够正确隐藏。

如何判断某个标签是否超出容器高度？

可以通过查找标签的位置，如果标签的 offsetTop 超过容器的 offsetHeight，则说明该标签超出容器高度。

🏷️

标签

JavaScript react 标签 省略号 计算 隐藏