Question

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

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

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

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

Answer 1

角度（或一般的javascript）无法知道元素是否使用了＆＃34; ...＆＃34;。看到这个非常相似的问题：HTML text-overflow ellipsis detection。

你能做的最好就是这样（你传递你关心的元素）：

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

Js提供这种联系。

Answer 2

除了Mathew的答案。

我将该JavaScript逻辑应用于使用材料组件的有角度2+实现。在此示例中，您可以看到，如果文本被截断，则可以使用相同的JS检查禁用或启用“材质工具提示”。

<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>

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

2 个答案: