隐藏溢出中的零件视图文本

Question

我制作bookReader，一页适合用户视口。对于这种方法我做div

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

与

#book { 
    overflow: hidden
} 

然后我提供只用按钮next和prev滚动这个元素。当用户单击下一个按钮时，它将像这样滚动

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

但我有问题。有时用户会看到文本行的一部分。如何检查每个页面是否显示最后一个文本行已损坏，如果他被破坏则隐藏它们。我不想改变内容。我需要一个函数来检查每个页面，如果它包含该部分文本，如果这个部分有文本，则通过在顶部元素上隐藏它来隐藏它。

DEMO：我用红色显示我需要找到和隐藏的东西。

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

DEMO 2：它可以包含任何内容（标题标记，img，<code>等） http://jsfiddle.net/lvivgeorge/jd7mum6c/12/

P.S。使所有相同line-height不是解决方案。更改内容样式也不是解决方案。

Answer 1

恕我直言你应该设置每个文本行的固定line-height，并将容器高度设置为每个文本行的多个高度。这应该有帮助

检查出来：http://jsfiddle.net/jd7mum6c/5/