Vue在计算宽度时不考虑隐藏文本

我有一个Vue/Vuetify应用程序,它有时会显示一个很长的文本字符串。当字符串特别长时,我使用CSS切断溢出 text-overflow: ellipsis 财产。省略号本身显示正确,但当Vue或浏览器计算宽度以定位页面上的其他元素时,似乎使用了文本的全长。

我发布了一个MCVE https://codepen.io/anon8171/pen/rNxYELZ .

预期行为:
绿色框位于屏幕右侧,与所有其他内容对齐。

实际行为:
绿色框位于其余内容下方的新行上。这是因为字符串的隐藏部分足够长,可以推入盒子的空间。我通过禁用来确认这一点 overflow: hidden 在我的应用程序中,查看盒子包裹的确切位置。

要在codepen中看到这一点,只需反复更改包含单词“long”的字符串的长度。

我注意到添加 max-width: 500px (或任何像素值)到 <span> 产生所需的行为。不幸的是,百分比值似乎不起作用,我不想在生产中使用固定的像素宽度。

有什么方法可以只获取用于宽度计算的字符串的可见部分吗?