隐藏溢出隐藏的部分视图文本答案

【问题标题】：Hide part view text in overflow hidden隐藏溢出隐藏的部分视图文本
【发布时间】：2014-12-22 18:10:40
【问题描述】：

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

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

与

#book { 
    overflow: hidden
}

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

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

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

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

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

附：使所有相同line-height 不是解决方案。改变内容样式也不是解决办法。

【问题讨论】：

【解决方案1】：

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

【讨论】：

我尝试过类似的方法，但如果书中包含h1,h2,img 或类似的标签，这并不总是好的方法。
不灵活。当我尝试从移动设备阅读时会发生什么？
所以另一种解决方案可以在容器的顶部/底部添加淡入/淡出渐变
它包含h1、h2或其他任何东西都没问题。只需在每个元素上强制 #book * {line-height: ...} 即可。如果是图像，您可以尝试将其缩放到特定高度。桌子上也一样
我想要这样的东西，但我怎么知道“淡出渐变到”的高度。我无法更改内容和内容样式。