Question

Angular2 / Typescript中是否有一种方法可以检测div是否因文本溢出而取决于屏幕的宽度。如果文本溢出，我想显示一个＆＃34;更多＆＃34;按钮。右边还有一个书签图标，所以我必须考虑到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;
    }
  }

typescript - 检测div是否溢出文本

1 个答案: