typescript - div가 텍스트로 오버플로되는지 감지합니다.

Question

Angular2/Typescript에 div가 화면 폭에 따라 텍스트로 오버플로되는지 감지하는 방법이 있습니까? 텍스트가 오버플로되어 있으면 "자세히"버튼을 표시하고 싶습니다. 오른쪽에 북마크 아이콘이있어서 div 너비를 고려해야합니다. 내 HTML에서

:

<div *ngFor="let i of items"> {{ i }} 
    <i class="fa fa-bookmark" aria-hidden="true"></i> 
</div> 

//If the text is overflow 
<button *ngIf="overflow"> More </button> 

내 타이프에서 :

@HostListener('window', ['$event']) 
public checkOverflow() { 
    console.log(event.target.innerWidth) 
} 

문제는 측면에 다른 요소가 고려 DIV 폭이 무엇을 찾는 방법이다. 문자열이 javascript/typescript 쪽에서 오버플로되어 있는지 확인하는 다른 방법이 있습니까?

Answer 1

HTML 파일

<div #theElementYouWantToCheck> 
    . 
    . 
    . 
    <button *ngIf="checkOverflow(theElementYouWantToCheck)"> More </button> 

</div> 

TS

checkOverflow (element) { 
    if (element.offsetHeight < element.scrollHeight || 
     element.offsetWidth < element.scrollWidth) { 
     return true; 
    } else { 
     return false; 
    } 
    } 

의