Fill a div with text untill is full, then create another one

I am building an ebook app, and for that I have a big chunk of text (the book) and I have to divide it into N number of divs wi开发者_JS百科th a special class. I manage to achieve somehow a result by counting the words and after N words create another div, but words count is not a really good parameter.

Is there any way I can fill a div (320 x 480) with text and when its full create another one? In the end what I need is the full list of divs one after another.

Any hint on what should I look for is much appreciated! Thanks

No, because you can't work out programatically how big that text is going to be when it is ultimately rendered for display.

Why not let the device itself work out how much text it can display on a page?

I don't have time to work out the specifics, but something (admittedly hacky) you could do is add a certain amount of text to the div and then check how its scrollHeight compares to its offsetHeight. This is probably going to be really slow, and you'd have to have some way of comparing it before you actually add the text: scrollHeight is always equal to offsetHeight, until the text actually overflows, and that's exactly what you're trying to avoid. Maybe some kind of temporary div? I don't know. I'll leave the specifics to you to work out. ...Or ignore completely. Whatever.