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(() => {
         // 文本内容超过最大宽度，出现展开icon
         if (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之后