Angular 2中截断文本的工具提示

Question

在Angular 2上工作时，我创建了一个工具提示，该工具提示仅对截断的文本打开，但现在对截断的文本和普通文本都开放。因此，我想提出将仅在截断的文本上打开的逻辑。 ！[输入图像说明

Answer 1

您可以在包装div和@ViewChild('yourDiv') yourDiv: ElementRef上使用一个引用，该引用可能具有以下CSS：

width: ...px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

然后将clientWidth和scrollWidth与以下表达式进行比较：this.yourDiv.nativeElement.scrollWidth > this.yourDiv.nativeElement.clientWidth

使用此表达式有条件地显示您的工具提示