如何检测角度控制器中的文本是不是溢出（文本溢出：省略号）

Posted 2023-03-06

【中文标题】如何检测角度控制器中的文本是不是溢出（文本溢出：省略号）

【英文标题】：How to detect if the text is overflow(text-overflow: ellipsis) in angular controller如何检测角度控制器中的文本是否溢出（文本溢出：省略号）

【发布时间】：2016-08-11 22:32:48

【问题描述】：

有什么方法可以检测角度控制器中的文本是否溢出？

在我的 CSS 中，我有以下代码：

width: calc(100% - 60px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 5px;

我希望能够检测角度控制器中的文本是否溢出，以便显示它的工具提示。如果文本没有溢出，则不需要显示工具提示，这就是我希望能够在控制器中检测文本是否溢出的原因。

【问题讨论】：

或许能帮到你jsfiddle.net/mortimerpa/AKXez

【参考方案1】：

Angular（或一般的 javascript）无法知道元素是否使用了“...”。看到这个非常相似的问题：html text-overflow ellipsis detection。

你能做的最好的事情是这样的（你在其中传递你关心的元素）：

 function isEllipsisActive(e) 
      return (e.offsetWidth < e.scrollWidth);
 

Js 提供该链接。

【参考方案2】：

除了马修的回答。

我将该 JavaScript 逻辑应用于使用材质组件的 Angular 2+ 实现。在此示例中，您可以看到，如果文本被截断，则使用相同的 JS 检查来禁用或启用 Material Tooltip。

<mat-expansion-panel-header 
            [matTooltipDisabled]="(titleContent.offsetWidth < matpanelTitle.scrollWidth)" 
            matTooltip="recording.alias">

    <mat-panel-title #matpanelTitle style="white-space: nowrap; 
                                           overflow: hidden; 
                                           text-overflow: ellipsis; 
                                           display: block;">

         <span #titleContent>
              recording.alias
         </span>

     </mat-panel-title>

</mat-expansion-panel-header>

【参考方案3】：

这是我为这个用例找到的更简洁的解决方案。我使用 slice angular pipe 代替 CSS，这两个值分别标记了切片字符的 start 和 end。

带有Slice 和*ngIf 的角省略号

切片管道分隔前 20 个字符 span 后跟手动编写的“...”字符串 省略号跨度取决于使用 item.name.length 显示的字符数，并使其大于或等于切片允许的字符数

<a *ngFor="let item of items">
   item.name | slice: 0 : 20 <span *ngIf="item.name.length >=20">...</span>
</a>

有条件地显示工具提示

我还希望它显示一个工具提示。但我不希望任何其他锚点有工具提示，除非省略号存在（因为工具提示会显示整个名称）

模板

对于 mouseover，使用三元运算符，如果它的字符数等于或多于先前识别的字符，则触发 onHover 方法 onHover 方法接受 $event 和项目的名称 (string) 工具提示具有显示在鼠标坐标 (absolute) 处所需的样式，但将组件变量绑定到 [style.top] 和 [style.left]，因此它出现在鼠标事件触发的位置 (mouseout) 确保不再将鼠标悬停在元素上时工具提示消失

<a
  *ngFor="let item of items"
  (mouseover)="(item.name.length >= 20) ? onHover($event, item.name) : '' "
  (mouseout)="showsTooltip ? (showsTooltip = !showsTooltip) : '' ">
   item.name | slice: 0 : 20 <span *ngIf="item.name.length >=20">...</span>
</a>

<!-- some other code -->

<div
  *ngIf="showsTooltip"
  [style.top]="tooltipTopY"
  [style.left]="tooltipLeftX"
  class="tooltip"
  >
   tooltipText 
</div>

组件

从事件对象中获取坐标并进行相应的绑定

export class SomeComponent implements OnInit 
  showsTooltip = false;
  tooltipText = '';
  tooltipTopY!: any;
  tooltipLeftX!: any;

  // ... other code

  onHover(e: any, cardName: string): void 
    this.tooltipText = cardName;
    if (e) 
      this.showsTooltip = true;
      this.tooltipTopY = e.clientY + 'px';
      this.tooltipLeftX = e.clientX + 'px';
    
  

希望这会有所帮助！感谢在这里帮助我的详尽答案；并且我发现这个解决方案到目前为止对我来说非常重要 - 所以只是希望在我可以分享的地方分享！