CSS에서 콘텐츠 오버플로 감지

Question

사용자가 "자세히보기"링크를 클릭 할 때까지 콘텐츠가 특정 임계 값을 초과하면 div에 표시되는 링크를 만들려고합니다. 나머지 콘텐츠가 표시됩니다. 긴 내용의 경우이 기능을 사용할 수있게되었지만 내용이 너무 짧아서 잘리지 않아도 될 때 표시하지 않는 방법을 알아내는 데 어려움을 겪고 있습니다. 데모를보고 내가 무슨 말을하고 있는지 확인해보십시오. 나는 두 번째 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은 다음에게 내가 필요없이 CSS와 함께이 일을하는 방법이 바라고 있어요