[JavaScript知识库]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%;
        padding: 0 16px;
        top: 50%;
        transform: translateY(-50%);
        font: 20px/25px 'Microsoft JhengHei';
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
        display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
        -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-line-clamp: 2; /* 文本需要显示多少行 */
      }

      &:hover {
        background-color: rgba(#fff, 0.15);
      }

	  /* 提示文本 */
      .content-box-tit {
        display: none;
        position: absolute;
        top: 49px;
        left: 76%;
        width: 127px;
        padding: 4px 8px;
        border: 1px solid #ffffff33;
        border-radius: 4px;
        background-color: #000000b3;
        font: 14px/20px 'Microsoft JhengHei';
        color: #ffffff;
        overflow: auto;
      }

	  /* 鼠标滑过显示提示文本内容 */
      &:hover .content-box-tit {
        display: block;
      }
    }

TypeScript

 showTip(event) {
    const scrollHeight = event.target.firstElementChild.scrollHeight; // 文本的实际高度   scrollHeight
    const clientHeight= event.target.firstElementChild.clientHeight; // 文本的可视高度 clientHeight

	// 因为本项目样式设置原因，未溢出时scrollHeight = clientHeight + 1，
	// 若样式跟我的不同，则按scrollHeight > clientHeight 判断即可
   	this.showTip = scrollHeight > clientHeight + 1;
  }

需求二：判断文字是否溢出，超出两行末尾加“展开全部”按钮，点击按钮展开全部信息

需求说明

判断文字是否溢出，超出两行末尾加“展开全部”按钮，点击按钮展开全部信息，点击“显示最少”按钮收起，内容不溢出不显示按钮

思路

与上一个需求判断方式一样

Html:

	<!-- show-all：判断是否显示所有内容 -->
    <div class="navigation" [ngClass]="{ 'show-all': showExpansion }">
      <div class="navigation-tit">{{ 'Process List' | translate }}</div>
      <div class="navigation-content">
      
      	<!-- #navigationElement：需要判断是否溢出的内容 -->
        <div class="navigation-inside-content" #navigationElement>
          <span
            *ngFor="let item of allFlow"
            >{{ item.processName | translate }}
          </span>
        </div>

		<!-- showExpansion：是否显示全部；showExpansionBtn：是否显示按钮 -->
        <span class="navigation-expansion" (click)="showExpansion = !showExpansion" *ngIf="showExpansionBtn">
          <ng-container *ngIf="!showExpansion; else isShowExpansion">
            {{ '展開全部' | translate }}
          </ng-container>
          <ng-template #isShowExpansion>
            {{ '顯示最少' | translate }}
          </ng-template>
        </span>
      </div>
    </div>

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

 .navigation {
      display: flex;
      width: 100%;
      max-height: 88px;
      margin: 12px 0;
      transition: all 0.5s ease;

      // 展开
      &.show-all {
        max-height: 100%;
        transition: all 1s ease;
      }
}

TypeScript

  showExpansionBtn = false; // 导引列 - 是否显示"展开全部"按钮
  showExpansion = false; // 导引列 - 是否"展开全部"
  
  @ViewChild('navigationElement') navigationElement: ElementRef;
  
  ngAfterViewInit(): void {
    setTimeout(() => {
      this.onResize();
    }, 500);
    fromEvent(window, 'resize', { capture: true, passive: true })
      .pipe(debounceTime(100)) // 设置时间间隔
      .subscribe((event: Event) => this.onResize());
  }

  // 导引列判断是否溢出
  onResize() {
    const navigationElement = this.navigationElement.nativeElement;
    this.showExpansionBtn = navigationElement.clientHeight < navigationElement.scrollHeight;
  }