Angular中利用ts实现“文本超过一行时，出现省略号和展开收起icon”效果

1. css部分

   /* 超过容器宽度，自动出现省略号*/
   .ellipsis {width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
   }
   /* 给icon设置默认样式 */
   .router-link {color: #009688;cursor: pointer;
   }
   

2. ts部分（封装成的指令如下）

   import { Directive, OnInit, Input, ElementRef } from "@angular/core";
   @Directive({selector: '[split-text]'
   })export class SplitTextDirective implements OnInit {@Input('split-text') set text(o) {this.setHtml(o);};// icon展开收起的状态unfold = false;constructor(private element: ElementRef) {}ngOnInit(): void {}setHtml(text): void {const oDiv = this.element.nativeElement;  // 父级容器// 文本部分const oP = document.createElement('p');oP.innerText = text;oP.style.display = 'inline';  // 设置成inline，可以按照文本内容撑开p标签的宽度，从而获取到文本的实际宽度oP.className = 'ellipsis'; // p标签是inline-block才生效oDiv.appendChild(oP);// 在此延时，防止获取标签的宽度为0，setTimeout(() => {// 文本内容超过最大宽度，出现展开iconif (oP.offsetWidth > oDiv.clientWidth){oP.style.display = 'inline-block';oP.style.width = 'calc(100% - 30px)'; // 给icon预留30px空间const oI = document.createElement('i');oI.className = 'ic ic-sousuoxiala router-link'; // ic ic-sousuoxiala类是字体图标，可自行更换oI.style.display = 'inline-block';oI.style.fontSize = '14px';oI.style.position = 'relative';oI.style.top = '-4px';oI.style.transform = 'rotate(0deg)';oDiv.appendChild(oI);oI.onclick = () => {this.unfold = !this.unfold;if (this.unfold){oP.style.display = 'inline';oP.classList.remove('ellipsis');oI.style.transform = 'rotate(180deg)';oI.style.top = '0px';oI.style.marginLeft = '10px';} else {oP.style.display = 'inline-block';oP.className = 'ellipsis';oI.style.transform = 'rotate(0deg)';oI.style.top = '-4px';oI.style.marginLeft = '0px';}};}}, 200);}
   }

3. 使用方法

   <div [split-text]='文本内容'></div>
   

4. 效果
   
   点击icon之后
   

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！