Having to set a height declaration using -webkit-line-clamp on older iOS devices?

On a page I'm building I am using the line clamp that Kevin showed in a YouTube short I came across recently. '.line-limit { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}' It is working as expected on all my Win 11 desktop browsers and in responsive mode but I checked on my iPhone 6S+ (iOS 15.7.9) and the paragraphs are shown full length and there are lines of text that are overlapping. I was able to look at the page on an iPhone 15 in the store this morning and it was working as expected. After some reading around and looking at how others have used it I saw that in the older articles they added a height declaration so I tried that and it didn't mess things up on the desktop and was better looking on my older iPhone but the thing was I had to "magic number" the height else it would either show text past the ellipsis or it would not fully hide the text after the ellipsis (Pic #2 ). Is there a work around for this or a formula to figure out the height for three lines of text?