html - 文本溢出：在 Chrome 中调整大小时出现省略号渲染问题

Question

假设我inline-block在某个容器内有徽章或标签作为元素，我想在最后text-overflow: ellipsis进行剪切和添加...。很容易。现在让我们尝试在 Chrome 上调整容器的大小。如果我在多行中为徽章编写所有 HTML - 很好。如果我将它们写在一行中（就像现在所有框架/捆绑程序等都会这样做）并开始调整大小 - 所有点都奇怪地冻结在原地。

这是演示：https ://codepen.io/buszmen/pen/gOpKbVe

第一个是一行，第二个是多行。开始调整大小以查看效果。

这在 Firefox 上运行良好。我想使用单行，否则会生成不需要的空格。我想我可以在 CSS 边距中考虑这个空白，但这听起来像是一种解决方法而不是解决方案。

有人可以向我解释吗？

标签： htmlcssgoogle-chromeellipsis