Detecting content overflow in CSS

Question

I'm trying to create a link that gets displayed on a div when the content exceeds a certain threshold that will hide the rest of the content until the user clicks on a "read more" link, which will cause the rest of the content to be displayed. I have gotten this to work for long content, but I'm having trouble figuring out how not to display it when the content is so short that it doesn't need to be truncated. Take a look at the demo to see what I'm talking about. I'd like the "read more" link not to show up on the second div cluster.

 $(function() { $("#toggle").click(function() { $("#content").toggleClass("truncated"); $("#linkArea").hide(); }); $("#toggle2").click(function() { $("#content2").toggleClass("truncated"); $("#linkArea2").hide(); }); }); 

 .truncated { max-height: 63px; overflow: hidden; } .content { font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; font-size: 125%; color: #3F4549; margin: 10px 0 10px 0; padding: 0; line-height: 21px; font-weight: 300; } .body { position: relative; } .body .read-more-fade { position: absolute; padding: 2px; bottom: 0; right: 75px; width: 50%; text-align: right; background-image: -webkit-gradient(linear,left,right,color-stop(0, rgba(255, 255, 255, 0)),color-stop(1, white)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white); background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), white); background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), white); background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), white); } .body .read-more { position: absolute; padding: 2px; bottom: 0; right: 0; margin-bottom: 0; width: 90px; text-align: right; background-color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="body"> <div id="content" class="content truncated">Lorem ipsum dolor sit amet, consectetur adipiscing 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> <div id="linkArea"> <div class="read-more-fade"> &nbsp; </div> <div class="read-more"> <a id="toggle" href="#">&hellip;read more</a> </div> </div> </div> <div class="body"> <div id="content2" class="content truncated">This content is too short to be truncated.</div> <div id="linkArea2"> <div class="read-more-fade"> &nbsp; </div> <div class="read-more"> <a id="toggle2" href="#">&hellip;read more</a> </div> </div> </div> 

Answer 1

我要做的是检测段落的高度是否大于5ems，然后显示它