Hide part view text in overflow hidden

Question

I making bookReader and one page will fit to user viewport. For this approach i make div

<div id="book">Long text...</div>

with

#book { 
    overflow: hidden
} 

Then i provide to scroll this element only with buttons next and prev. When user click next button it will scroll like this

$('#next').on('click',function(){
    $('#book').scrollTop($('#book').scrollTop() +  $('#book').height());
});

But i have problem. That some times user will see part of text-line. How can i check every page is that last text-line is shown broken, and hide them if him is broken. I don't want to change content. I need a function that will check every page if that contains that part text and if this have that part text, hide him by making on the top element that should hide that.

DEMO: I show in red color what i need find and hide.

http://jsfiddle.net/lvivgeorge/jd7mum6c/3/

DEMO 2: It can contains anything (header tags, img, <code> , etc.) http://jsfiddle.net/lvivgeorge/jd7mum6c/12/

P.S. Make all the same line-height is not solution. Change content styles is not solution too.

Answer 1

IMHO You should set fixed line-height of each text line, and set container height fixed as a multiple height of each textline. This should helps

Check this out: http://jsfiddle.net/jd7mum6c/5/