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

问题描述 投票:0回答:2

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

有什么建议吗?

angular angular-material
2个回答
0
投票

这些是您需要的样式规则(示例):

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

单击查看工作演示


0
投票

我也遇到了同样的问题。

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

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;
    }
  1. 将此输入添加到表格元素:

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

这个(

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

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

© www.soinside.com 2019 - 2024. All rights reserved.