css部分
/* 超过容器宽度，自动出现省略号*/.ellipsis {width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}/* 给icon设置默认样式 */.router-link {color: #009688;cursor: pointer;}
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);}}
使用方法
<div [split-text]='文本内容'></div>
效果
点击icon之后
