Angular 判断文字是否溢出，超出两行末尾加省略号，hover显示提示文本
需求一：判断文字是否溢出，超出两行末尾加省略号，hover显示提示文本需求说明思路 需求二：判断文字是否溢出，超出两行末尾加“展开全部”按钮，点击按钮展开全部信息需求说明思路需求一：判断文字是否溢出，超出两行末尾加省略号，hover显示提示文本
需求说明
将标签按首字母排序列出，标签内容超出两行时末尾显示省略号，鼠标滑过时判断文本是否溢出，溢出显示提示文本，未溢出则不显示。
思路
鼠标滑过的时候使用(mouseenter)事件，判断文本的实际高度：scrollHeight和文本的可视高度clientHeight,溢出则设置tips可以显示。以下为具体代码
Html:
<divclass="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; // 文本的实际高度 scrollHeightconst 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;}
