根据预定义长度具有特定宽度的材料表单元格

【问题标题】：Material table cells with specific width according to predefined length根据预定义长度具有特定宽度的材料表单元格
【发布时间】：2021-09-06 08:43:08
【问题描述】：

我会先展示我的代码。

<ng-container matColumnDef="position">
   <th mat-header-cell *matHeaderCellDef> No. </th>
   <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

一切正常，我的要求是显示文本，但只是固定长度。例如，如果我的文本长度为50 个字符，则要求显示40。我每行有很多单元格，有很多固定长度的单元格。

为了澄清，这里我的困难是如何用一些文本长度设置宽度，我看到了很多例子，但列宽是在 CSS 文件中设置的。我怎样才能做到这一点？提前致谢。

【问题讨论】：

标签： css typescript angular-material

【解决方案1】：

实现此目的的一种简单方法是通过 Angular 内置的 [ngStyle] 设置 td 的宽度，并计算元素的长度。

<ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"
      [ngStyle]="{'max-width': ((element.name.length) - 20) + 'ch', 'overflow': 'hidden' }">
      {{element.name}}</td>
</ng-container>

这里元素的max-width（在ch，见MDN）由element.name.length减去20定义（根据需要指定）。还设置了overflow: hidden，因此其余文本不会显示在表格单元格内。

固定桌和普通桌的区别见下文。

固定表

普通表

Here's a StackBlitz 说明如上。

【讨论】：

谢谢罗伊，我会试试你的解决方案。