有没有办法在 Vue.js 中渲染之前测量元素的高度？

Question

我需要通过将它们分组到几个块中来呈现页面上的许多文本项。要将项目分组到块中，我需要知道每个文本项目必须计算的行数，以计算每个块可以占用多少项目。 我也知道渲染前 eack 块的确切宽度，但我不知道每个文本项的高度。

如何在渲染之前计算出每个文本项的行数，以知道可以将多少行放在一个块中？

之前我们使用 canvas 来测量每个项目的文本，并借助 measureText() 方法计算行数。但是我们发现，canvas 不知道分词属性，并且我们在渲染项目文本时不会分词。因此，canvas 计算 2 行而不是 3 行，依此类推。计算错误。

在 Vue.js 或 vanilla JS 中渲染之前是否有另一种方法来测量文本行数？

Answer 1

一般来说，不会。有数百个因素会影响元素的尺寸，例如安装的字体、可访问性设置、浏览器扩展、浏览器设置、视口大小、设备像素密度和渲染中的浏览器特性。

最简单的方法是以对用户不可见但仍在页面上的方式呈现项目，然后使用 Javascript 获取元素的计算尺寸，然后再使其可见。