如何为Angular Material表格单元格按预设字符长度设置对应宽度

方案1：纯CSS实现（推荐，改动最小） #

该方案通过CSS实现文本超出指定长度自动省略，同时用ch单位精准匹配字符宽度设置列宽，符合你按字符长度控制列宽的需求：

1. 给需要限制长度的单元格添加自定义类，修改后的HTML代码如下：

<ng-container matColumnDef="position">
   <th mat-header-cell *matHeaderCellDef class="text-truncate-40"> No. </th>
   <td mat-cell *matCellDef="let element" class="text-truncate-40" [title]="element.position"> {{element.position}} </td>
</ng-container>

2. 在全局样式或者组件样式中添加对应CSS：

/* 40ch约等于40个单字符的宽度，可根据不同列需求自定义不同类，比如text-truncate-30对应30ch */
.text-truncate-40 {
  width: 40ch;
  max-width: 40ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

说明：添加[title]属性后，鼠标悬浮在单元格上会展示完整文本内容，提升使用体验。

方案2：TS管道动态截断+列宽动态绑定 #

如果你需要实际截断输出的文本内容（而非仅样式层面隐藏），可以搭配Angular管道实现：

1. 首先创建文本截断管道，代码如下：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'textTruncate'
})
export class TextTruncatePipe implements PipeTransform {
  transform(text: string, maxLen: number = 40): string {
    if (!text || text.length <= maxLen) return text;
    return text.slice(0, maxLen) + '...';
  }
}

2. 在对应模块的declarations中引入该管道后，即可在模板中使用，同时可通过ngStyle动态绑定列宽：

<ng-container matColumnDef="position">
   <th mat-header-cell *matHeaderCellDef [ngStyle]="{'width': '40ch', 'max-width': '40ch'}"> No. </th>
   <td mat-cell *matCellDef="let element" [ngStyle]="{'width': '40ch', 'max-width': '40ch'}"> {{element.position | textTruncate:40}} </td>
</ng-container>

如果多个单元格需要设置不同的展示长度，只需要给不同列设置不同的ch数值、或者不同的管道截断参数即可，无需重复开发通用逻辑。

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