Is there a way to measure height of the element before render in Vue.js?

I need to render many text items on the page by grouping them into several blocks. To group items to blocks I need to kno number of lines each text item will have to calculate how many items each block can take. I also know exact width of eack block before render but I don't know the height of each text item.

How can I figure out the amount of lines of each text item before render to know how many of them can be put in one block?

Previously we used canvas to measure text of each item and calculat number of lines with the help of measureText() method. But what we found out is that canvas does not know about word-break property and that we don't break words when rendering text of the items. Therefore canvas calculates 2 lines instead of 3 and so on. The calculations are wrong.

Is there another way to measure number of text lines before render in Vue.js or vanilla JS?

Updated 2022-01-14 10:29:51Z by Olga