Angular mat-table 无法使单元格文本省略

Question

嗨，我正在使用 Angular Material 表作为我的网格，mat-table 在内部扩展单元格高度以调整长文本，但我想保持高度一致并显示省略号。

有什么建议吗？

Answer 1

这些是您需要的样式规则（示例）：

.text-list .ellipsis {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 200px;
}

单击查看工作演示。

Answer 2

我也遇到了同样的问题。

我在网上可以找到解决问题的方法，但前提是使用

mat-table

作为元素（

<mat-table>...</mat-table>

）而不是作为 html 的

table

元素（

<table mat-table>...</table>

）的指令。

因此，如果您使用 mat-table 作为元素，这里是一个可行的解决方案（请注意，在这种情况下，您不能使用某些 html 表的元素功能，如

colspan

、

rowspan

等）： https://stackblitz.com/edit/text-overflow-on-mat-table-using-display-flex-vz5wh7?file=app%2Ftable-basic-flex-example.css

如果您使用 mat-table 作为指令，那么您应该这样做：

1. 将此 css 添加到包含需要用省略号修剪的值的

   div

   或

   span

   中：

    .mat-cell-value {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

2. 将此输入添加到表格元素：

   <table mat-table [fixedLayout] > ... </table>

这个（

[fixedLayout]

）将使所有列具有相同的宽度，因此当调整窗口大小时，列的宽度也会按比例调整大小，并且当列的宽度变得小于其值宽度时，它将修剪该值并添加省略号无法贴合的部分。

我想这也可以通过在列宽度上添加百分比来解决（例如：第一列 - 20％，第二列 - 50％，第三列 - 10％，第四列 - 20％）。重要的是，我们必须以某种方式指定列的宽度，因为默认情况下，mat-table 的列将缩小到可以包含所有值的程度（因此，显然，直到包含最长值的单元格的宽度）它将停止缩小，因此省略号将不起作用，按照前面提到的方式，我们正在强制它进一步缩小。