javascript - 超过一定长度的段落弹出

Question

我在一个网站上工作，该网站具有动态生成的博客文章，可以有任意长度。我想将每个博客文章条目的高度限制在一定高度，比方说 250px。如果博客文章的内容超过该高度，我想将其剪掉并显示一个“阅读更多”链接，该链接将打开一个模态叠加层，其中显示整个帖子。

我使用标准的 html/css/js 进行所有前端 View 开发。

我的问题是是否有现成可用的工具。我发现并使用了 http://jedfoster.com/Readmore.js/在过去，但它不会打开弹出模式覆盖。有没有类似 readmore.js 打开覆盖的东西？

Answer 1

我这样做的方法是根据客户端高度测试您的 scrollHeight。这是一个示例:

这将提示"is":

<div id="overflow-test" style="height:250px;width:100px;overflow-y:hidden;">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<script>
alert($('#overflow-test')[0].scrollHeight > $('#overflow-test').height() ? "YES" : "NO");
</script>

这将警告“NO”:

<div id="overflow-test" style="height:250px;width:100px;overflow-y:hidden;">
   Lorem ipsum dolor sit amet.
</div>

<script>
alert($('#overflow-test')[0].scrollHeight > $('#overflow-test').height() ? "YES" : "NO");
</script>

基本上，我会用 $.each() 来测试它们，如果它们超出了 div 的高度，则让阅读更多按钮可见并启用，如果按钮已启用，则添加代码以使用模态框，并且它测试超出 div 的可见部分。