如何在Vue3中使可变文本适合具有最大字体大小的div

Question

我有一个显示可变文本的 div。 我想为文本提供可能的最大字体大小，而不会溢出。 所以如果文本改变，字体大小也可能改变。

所以我做了一个算法来比较这个div的clientWidth和scrollWidth。 每次检测到溢出时，我都会减小 div 的字体大小，然后等待 vue 上传 clientWidth 和 scrollWidth（等待 this.$nextTick()）并进行新的检查。

这很好用，但有一个例外。

安装组件时，scrollWidth 为错误值（不是 0，而是低于真正的 scrollWidth）。 在我的包含 div 的组件的安装 function 被触发后，scrollWidth 变得正确约 30 毫秒。 即使我在我安装的 function 上等待 this.$nextTick()。 但是，如果我更改文件，触发热重载，则在开始安装 function 时正确设置了滚动宽度。

你能解释一下为什么吗？ 这是一个 Vue3js 错误吗？ 我该如何处理？ scrollWidth 有替代方法吗？

我的最后一个想法是在正确设置 scrollWidth 后 30 毫秒后使用 setTimeout 启动算法。 那行得通，但我不喜欢这个解决方案，并且用户会看到调整了文本大小的内容...

也许有一个完全不同的解决方案可以使可变文本适合具有最大可能字体大小的 div？