弹出超过一定长度的段落

Question

I am working on a website that has dynamically generated blog posts that can have any length. I would like to limit the height of each blog post entry to a certain height, let's say 250px. If a blog post's content exceeds that height, I would like to cut it off and display a "read more" link which will open a modal overlay within which the entire post is displayed.

I am using standard html/css/js for all front end view development.

My question is if there is a tool out there that does this out of the box. I found and have used http://jedfoster.com/Readmore.js/ in the past but it doesn't open a popup modal overlay. Is there something similar readmore.js that opens an overlay?

Answer 1

The way I would do this is to test your scrollHeight against the client height.. here's an example:

This will alert "YES":

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

This will alert "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>

Basically, I would test them with a $.each() and make the read more button visible and enabled if they extend beyond the height of the div, and add code to use a modal box if the button is enabled and it tests as beyond the visible portion of the div.