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) {
    return element.offsetHeight < element.scrollHeight ||
           element.offsetWidth < element.scrollWidth;
  }