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

Question

我将首先显示我的代码。

<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 文件中设置的。我怎样才能做到这一点？提前致谢。

标签： csstypescriptangular-material

Answer 1

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

<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（根据需要指定）。Alsooverflow: hidden已设置，因此其余文本不会显示在表格单元格内。

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

固定台

普通表

这是上面的 StackBlitz说明。