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

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

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

我的问题是，是否有工具可以立即使用。我发现并在过去使用过http://jedfoster.com/Readmore.js/，但是它没有打开弹出模式叠加层。是否有类似的readmore.js可以打开覆盖图？

最佳答案

我这样做的方法是针对客户端高度测试您的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的可见部分。

关于javascript - 弹出超过一定长度的段落，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23417862/