콘텐츠가 넘치지 않는다면 더보기 버튼이 표시되지 않습니다.

Question

내 학교 프로젝트에서 div의 콘텐츠가 오버플로되었는지 확인하고 있습니다. 오버플로 한 경우 아무것도 수행하지 않지만 오버플로가 아닌 경우 Read more 링크를 표시하지 않습니다. /단추.

여기 내 코드의

,

<div class="hideContent">{{ content }}</div> 
<div><a class="showLink" href="#">Read more</a></div> 

편집 :이 된 div의

모두 너무 & 내용 Read more 페이지에 여러 번 보여주는 루프에 대한 내부입니다.

다음은 컨텐츠가 오버 플로워 경우 내가 확인하고있어 어떻게

.hideContent{ 
    max-height: 200px; 
    overflow: hidden; 
} 

은 여기, CSS를합니다.

var getElements = document.querySelectorAll('.hideContent'); 

Array.from(getElements).forEach(function(element) { 
    if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) { 
    // Do Nothing 
    } else { 

    If content is not overflown then hide the `Read more` Link! 

    } 
}); 

내용이 넘쳐되지 않으면 어떻게 우리가 경우에 Read more 링크를 숨길 수 있습니까? 고맙습니다 . . .

Answer 1

난 당신이 스크립트 코드 조건이 잘 작동한다고 가정, 그래서 그냥 else 부분에 추가 : -

$(element).next().find(".showLink").hide(); 

작업 스 니펫 : -

$(document).ready(function(){ 
 
    var getElements = document.querySelectorAll('.hideContent'); 
 
    Array.from(getElements).forEach(function(element) { 
 
    if ((element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)) { 
 
     // Do Nothing 
 
    } else { 
 
     $(element).next().find(".showLink").hide(); 
 
    } 
 
    }); 
 
});

.hideContent{ 
 
    max-height: 200px; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hideContent"> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 
</div> 
 

 
<div><a class="showLink" href="#">Read more</a></div> 
 

 
<div class="hideContent"> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</div> 
 

 
<div><a class="showLink" href="#">Read more</a></div>

Answer 2

지금까지 수표는 g입니다. 대다수.
역 if 조건을 수행하면 else 블록을 삭제할 수 있습니다.

바닐라 JavaScript/DOM에서 [요소] .hidden 속성을 true로 설정하면 요소를 숨길 수 있습니다.

다음 (DOM-) 요소가 .nextElementSibling [요소]에 의해 얻을 수 있습니다

var getElements = document.querySelectorAll('.hideContent'); 
 
Array.from(getElements).forEach(function(el) { 
 
    if (el.offsetHeight >= el.scrollHeight && el.offsetWidth >= el.scrollWidth) 
 
     el.nextElementSibling.hidden = true; 
 
});

.hideContent{ 
 
    max-height: 200px; 
 
    max-width: 200px; 
 
    overflow: hidden; 
 
}

<div class="hideContent" style="background:#bea;">this element don't have a "Read more"-Block</div> 
 
<div><a class="showLink" href="#">Read more</a></div><br> 
 
<div class="hideContent"> 
 
    <div style="background:#bada55; width:220px;">This element is to wide, so it shows the "Read more"-Block</div> 
 
</div> 
 
<div><a class="showLink" href="#">Read more</a></div> 
 
<div class="hideContent"> 
 
    <div style="background:#bada55; height: 220px;">This element is to high</div> 
 
</div> 
 
<div><a class="showLink" href="#">Read more</a></div>