I'm working on a function to calculate how many lines of text can fit in a dynamically sized element that adjusts based on available space. I know I can't use a fixed value with line-clamp for truncation. I've done similar calculations before, but they often feel a bit inconsistent. I'm curious if there's a simpler method than subtracting the text element's height from the parent height and considering line heights, padding, margins, and paragraph counts.
2 Answers
Have you considered the text-overflow: ellipsis option? It might help with overflow issues.
You might want to explore using regex to count the number of newline characters in your text. From there, you could multiply that count by your line height to gauge how many lines will fit.
That seems like a good alternative for height calculation, but does it really tackle the tougher stuff like spacing between paragraphs? I'll definitely give it a shot for that part, thanks! 🙂
I'm pretty sure you'd still need a clamp for multiple lines, which means you'd have to stick to a fixed number of lines!