javascript - 在隐藏的溢出中隐藏零件 View 文本

Question

我制作了 bookReader，一页将适合用户视口(viewport)。对于这种方法，我制作了 div

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

与

#book { 
    overflow: hidden
} 

然后我提供仅使用 next 和 prev 按钮滚动此元素。当用户点击下一步按钮时，它将像这样滚动

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

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

演示:我用红色显示我需要查找和隐藏的内容。

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

DEMO 2:它可以包含任何内容(标题标签、img、<code> 等) http://jsfiddle.net/lvivgeorge/jd7mum6c/12/

附言都一样line-height不是解决方案。更改内容样式也不是解决方案。

Answer 1

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

检查一下:http://jsfiddle.net/jd7mum6c/5/