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;
    }
  }