Angular 判断文字是否溢出，超出两行末尾加省略号，hover显示提示文本

需求一：判断文字是否溢出，超出两行末尾加省略号，hover显示提示文本

需求说明

将标签按首字母排序列出，标签内容超出两行时末尾显示省略号，鼠标滑过时判断文本是否溢出，溢出显示提示文本，未溢出则不显示。

思路

鼠标滑过的时候使用(mouseenter)事件，判断文本的实际高度：scrollHeight和文本的可视高度 clientHeight,溢出则设置tips可以显示。以下为具体代码

Html:

<div
    class="content-box"
     *ngFor="let item of data[letter]"
     (mouseenter)="showTip($event)"
   >
     <span> {
  { item.processName | translate }}</span>
     <div class="content-box-tit" *ngIf="showTip">{
  { item.processName | translate }}</div>
</div>

设置文本超出两行时，末尾显示省略号

 .content-box {
   
      position: relative;
      display: flex;
      width: 19.1%;
      height: 75px;
      margin: 8px 1.11% 16px 0;
      border-radius: 5px;
      background-color: #ffffff0d;
      color: #ffffffcc;
      justify-content: center;
      flex-direction: column;

      span {
   
        position: absolute;
        width: 100%