javascript - 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>

在我的 typescript 中:

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