Angular技术实现：如何判断下拉框文本是否被截断？

当然有完美的解决方案啦！在Angular生态里，我们可以通过自定义指令来优雅实现这个需求——自动检测下拉选项的文本是否被截断，只在需要的时候显示tooltip。下面是两种常用的实现方式，不管你用原生select还是Angular Material的组件都能适配：

1. 基于Angular Material Tooltip的实现（推荐） #

如果你项目里用了Angular Material，这个方案可以和现有组件无缝集成：

第一步：创建自定义指令 #

import { Directive, ElementRef, OnInit, OnDestroy, HostListener } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

@Directive({
  selector: '[appTruncatedTooltip]'
})
export class TruncatedTooltipDirective implements OnInit, OnDestroy {
  private resizeObserver: ResizeObserver | null = null;

  constructor(
    private el: ElementRef<HTMLElement>,
    private matTooltip: MatTooltip
  ) {}

  ngOnInit(): void {
    this.checkTruncation();
    // 监听元素尺寸变化（比如窗口缩放、选项内容更新）
    this.resizeObserver = new ResizeObserver(() => this.checkTruncation());
    this.resizeObserver.observe(this.el.nativeElement);
  }

  ngOnDestroy(): void {
    this.resizeObserver?.disconnect();
  }

  @HostListener('mouseenter')
  onMouseEnter(): void {
    this.checkTruncation();
  }

  private checkTruncation(): void {
    const element = this.el.nativeElement;
    // 核心判断：scrollWidth大于clientWidth说明内容溢出被截断
    const isTruncated = element.scrollWidth > element.clientWidth;
    // 控制tooltip是否禁用
    this.matTooltip.disabled = !isTruncated;
    // 同步tooltip内容为选项文本
    this.matTooltip.message = element.textContent?.trim() || '';
  }
}

第二步：在模板中使用指令 #

记得先在模块里导入MatTooltipModule，并把自定义指令加到declarations数组中，然后在mat-option上添加指令：

<mat-form-field>
  <mat-label>选择选项</mat-label>
  <mat-select>
    <mat-option 
      *ngFor="let option of options" 
      [value]="option.value" 
      appTruncatedTooltip
    >
      {{ option.label }}
    </mat-option>
  </mat-select>
</mat-form-field>

2. 原生Title属性实现（无需Material） #

如果你的项目没用到Angular Material，也可以用原生的title属性来实现，同样是自定义指令：

自定义指令代码 #

import { Directive, ElementRef, OnInit, OnDestroy, HostListener } from '@angular/core';

@Directive({
  selector: '[appTruncatedTitle]'
})
export class TruncatedTitleDirective implements OnInit, OnDestroy {
  private resizeObserver: ResizeObserver | null = null;

  constructor(private el: ElementRef<HTMLElement>) {}

  ngOnInit(): void {
    this.updateTitle();
    this.resizeObserver = new ResizeObserver(() => this.updateTitle());
    this.resizeObserver.observe(this.el.nativeElement);
  }

  ngOnDestroy(): void {
    this.resizeObserver?.disconnect();
  }

  @HostListener('mouseenter')
  onMouseEnter(): void {
    this.updateTitle();
  }

  private updateTitle(): void {
    const element = this.el.nativeElement;
    const isTruncated = element.scrollWidth > element.clientWidth;
    // 只有截断时设置title，否则清空避免多余提示
    element.title = isTruncated ? (element.textContent?.trim() || '') : '';
  }
}

原生Select中使用 #

<select>
  <option 
    *ngFor="let option of options" 
    [value]="option.value" 
    appTruncatedTitle
  >
    {{ option.label }}
  </option>
</select>

关键注意事项 #

• 必须配置CSS：要确保选项元素的CSS开启了文本截断效果，否则scrollWidth和clientWidth的判断会失效，添加以下样式：

mat-option, option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

• 动态内容适配：ResizeObserver会自动监听元素尺寸变化，不管是窗口缩放还是选项内容动态更新，都能实时检测是否截断。
• 指令复用性：这个指令不仅可以用在select选项上，其他需要判断文本截断显示tooltip的元素（比如按钮、表格单元格）也能直接复用。

内容的提问来源于stack exchange，提问作者João Silva