Question

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

我正在使用标准的html / css / js进行所有前端视图开发。

我的问题是，是否有一个开箱即用的工具。我发现并且过去曾使用http://jedfoster.com/Readmore.js/，但它没有打开弹出模式叠加层。是否有类似的readmore.js打开叠加层？

Answer 1

我这样做的方法是针对客户端高度测试你的scrollHeight ..这是一个例子：

这将提醒“是”：

<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>

这将提醒“否”：

<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的可见部分。

弹出超过一定长度的段落

1 个答案: