如何在Angular中检测text-overflow: ellipsis是否生效

以下是几种适配你场景的可行检测方法：

方法1：创建隐藏克隆元素对比宽度 #

核心思路是生成一个和目标元素样式一致但不限制宽度的隐藏元素，计算文本的自然宽度后，与目标元素的实际宽度对比：

组件代码 #

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-product-id',
  templateUrl: './product-id.component.html',
  styleUrls: ['./product-id.component.css']
})
export class ProductIdComponent implements AfterViewInit {
  @Input() productId: string;
  @Input() maxWidthProductId: string;
  isTextOverflow = false;
  @ViewChild('test') testElement: ElementRef<HTMLParagraphElement>;

  ngAfterViewInit(): void {
    this.checkTextOverflow();
    // 若productId或maxWidthProductId动态变化，需在变更时重新调用checkTextOverflow
  }

  private checkTextOverflow(): void {
    const targetEl = this.testElement.nativeElement;
    // 创建克隆元素
    const cloneEl = document.createElement('p');
    // 复制目标元素关键样式，保证宽度计算一致
    cloneEl.style.font = getComputedStyle(targetEl).font;
    cloneEl.style.whiteSpace = 'nowrap';
    cloneEl.style.position = 'absolute';
    cloneEl.style.visibility = 'hidden';
    cloneEl.style.padding = getComputedStyle(targetEl).padding;
    cloneEl.style.border = getComputedStyle(targetEl).border;
    // 填入目标文本
    cloneEl.textContent = this.productId;
    // 添加到DOM才能正确计算宽度
    document.body.appendChild(cloneEl);
    // 判断是否溢出：克隆元素自然宽度 > 目标元素实际宽度
    this.isTextOverflow = cloneEl.offsetWidth > targetEl.offsetWidth;
    // 清理克隆元素
    document.body.removeChild(cloneEl);
  }
}

方法2：利用Canvas计算文本宽度 #

通过Canvas的measureText方法直接计算文本宽度，需确保字体样式与目标元素完全匹配，避免偏差：

组件代码 #

import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-product-id',
  templateUrl: './product-id.component.html',
  styleUrls: ['./product-id.component.css']
})
export class ProductIdComponent implements AfterViewInit {
  @Input() productId: string;
  @Input() maxWidthProductId: string;
  isTextOverflow = false;
  @ViewChild('test') testElement: ElementRef<HTMLParagraphElement>;

  ngAfterViewInit(): void {
    this.checkTextOverflow();
  }

  private checkTextOverflow(): void {
    const targetEl = this.testElement.nativeElement;
    const computedStyle = getComputedStyle(targetEl);
    // 创建Canvas上下文
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    // 匹配目标元素字体样式
    ctx.font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`;
    // 计算文本宽度
    const textWidth = ctx.measureText(this.productId).width;
    // 计算目标元素可用宽度（减去padding和border）
    const elementAvailableWidth = targetEl.offsetWidth 
      - parseInt(computedStyle.paddingLeft) 
      - parseInt(computedStyle.paddingRight) 
      - parseInt(computedStyle.borderLeftWidth) 
      - parseInt(computedStyle.borderRightWidth);
    this.isTextOverflow = textWidth > elementAvailableWidth;
  }
}

方法3：结合ResizeObserver监听动态变化 #

如果maxWidthProductId或productId会动态更新，用ResizeObserver监听元素尺寸变化，实时检测溢出状态：

组件代码 #

import { Component, Input, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-product-id',
  templateUrl: './product-id.component.html',
  styleUrls: ['./product-id.component.css']
})
export class ProductIdComponent implements AfterViewInit, OnDestroy {
  @Input() productId: string;
  @Input() maxWidthProductId: string;
  isTextOverflow = false;
  @ViewChild('test') testElement: ElementRef<HTMLParagraphElement>;
  private resizeObserver: ResizeObserver;

  ngAfterViewInit(): void {
    this.resizeObserver = new ResizeObserver(() => {
      this.checkTextOverflow();
    });
    this.resizeObserver.observe(this.testElement.nativeElement);
    this.checkTextOverflow();
  }

  ngOnDestroy(): void {
    this.resizeObserver?.unobserve(this.testElement.nativeElement);
  }

  // 复用方法1或方法2的checkTextOverflow实现，这里以方法1为例
  private checkTextOverflow(): void {
    const targetEl = this.testElement.nativeElement;
    const cloneEl = document.createElement('p');
    cloneEl.style.font = getComputedStyle(targetEl).font;
    cloneEl.style.whiteSpace = 'nowrap';
    cloneEl.style.position = 'absolute';
    cloneEl.style.visibility = 'hidden';
    cloneEl.style.padding = getComputedStyle(targetEl).padding;
    cloneEl.style.border = getComputedStyle(targetEl).border;
    cloneEl.textContent = this.productId;
    document.body.appendChild(cloneEl);
    this.isTextOverflow = cloneEl.offsetWidth > targetEl.offsetWidth;
    document.body.removeChild(cloneEl);
  }
}

额外注意 #

• 所有方法需在ngAfterViewInit中调用，确保元素已完成渲染。
• 若productId动态变化，需在ngOnChanges钩子中重新触发检测。
• ResizeObserver兼容多数现代浏览器，如需兼容旧版可添加对应polyfill。

内容的提问来源于stack exchange，提问作者user22