檢測CSS中的內容溢出

Question

我試圖創建一個鏈接，當內容超過某個閾值時，它會在div上顯示，這會隱藏內容的其餘部分，直到用戶點擊「read more」鏈接將導致顯示其餘內容。我已經得到了這個工作的長期內容，但我很難找出如何不顯示它，當內容是如此之短，它不需要被截斷。看看演示，看看我在說什麼。我希望「閱讀更多」鏈接不會顯示在第二個div羣集上。

$(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然後顯示它