在 Angular 材质表中使用省略号

Posted 2023-03-05

【中文标题】在 Angular 材质表中使用省略号

【英文标题】：Using Ellipsis in Angular Material Table

【发布时间】：2018-12-27 23:06:42

【问题描述】：

默认情况下，如果内容从包含它的单元格溢出，Angular Material Table 会将内容放在下面的新行中。我正在尝试设置它，以便溢出的文本被截断为“...”。我现在的代码不会截断内容并将其显示在一行中，直到溢出父级<div>

我使用<table mat-table> 而不是<mat-table>，因为它的列会根据Angular Material Website 中所述的内容自行调整大小。我正在尝试创建的表是响应式的，并根据其父级的大小调整自身大小<div>

html：

<div class="table-content">
  <table mat-table [dataSource]="dataSource" class="table-container">
    <ng-container [matColumnDef]="item" *ngFor="let item of displayedColumns">
      <th mat-header-cell *matHeaderCellDef>item </th>
      <td mat-cell *matCellDef="let element">
        <div class="table-data-content">
          <span>element[item]</span>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

CSS：

.table-container 
  position: absolute;
  width: 100%;
  height: 100%;

.table-data-content 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

Angular 组件中使用的示例数据：

  dataSource = [
     Name: "Some file name that is very long", Date: '08/30/2017', Uploader: 'Some uploader name that is very long',
     Name: "Some file name that is very long", Date: '08/30/2017', Uploader: 'Some uploader name that is very long'
  ];

  displayedColumns = ['Name', 'Date', 'Uploader'];

我可以解决什么问题以在表格中适当使用省略号？

更新： 如果我添加以下 css，省略号会起作用，但我仍然不确定为什么。

td 
max-width: 0px;

但是，这种方法破坏了 Angular Material Table 根据内容的长度有效地分配每列宽度的方式，因此当另一列仍有大量空白空间时，内容会被截断。有没有更好的解决方案？

【问题讨论】：

指定max-width 是我的关键（它可以> 0）。谢谢！

在 mat-cell 内的单独 div 元素中添加 css 类对我有用...谢谢

【参考方案1】：

您的第一个问题是您将宽度和高度应用于“table-content”，您需要将其直接应用于 table 标记。

试试这个：

table 
  width: 100%;
  table-layout: fixed;


th, td 
  overflow: hidden;
  width:auto;
  text-overflow: ellipsis;
  white-space: nowrap;

在 table 标记上使用 table-layout：已应用固定，内容不再指示布局，而是浏览器使用从表格的第一个定义的任何宽度行来定义列宽。

【讨论】：

对我来说，“显示：块”是一个基本要素，即 overflow: hidden;文本溢出：省略号；空白：nowrap；显示：块

【参考方案2】：

您可以按如下方式定义内联样式：

style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;"