Fill CSS box with text from MySQL till there is no overflow, scrollbar, or hidden text

Question

I want to fill a CSS box with text till there is no overflow or scrollbar. I fetch text from MySQL. The user clicks a button and the next bit of text that can fit will fill the box. The only way I've figured to do this is by parsing through the text and counting characters and newlines, etc and calculating whether it will fit in the box. Is there an easier way to do this? Thank you

Answer 1

There's no reliable way to figure out how much text will fit in a DOM element.

However, I'm not quite sure why just setting overflow:hidden on the box won't suffice.

Anything that overflows will simply be clipped (that is, will be hidden).

Answer 2

As timdev said, there is no cost effective way to do this with an arbitrary font. You'd essentially have to duplicate the "Print Preview" functionality that your OS and printer-drivers have. That's doable but hardly seems cost-effective.

However, if you use a fixed-width font, like Courier, and can control or measure the box's dimensions, then you can get a pretty close estimate...
Charcount = Box size / Font size
(accounting for margins, padding, etc.)