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

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 te开发者_JS百科xt 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

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).