嗨,我正在使用 Angular Material 表作为我的网格,mat-table 在内部扩展单元格高度以调整长文本,但我想保持高度一致并显示省略号。
有什么建议吗?
这些是您需要的样式规则(示例):
.text-list .ellipsis {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
}
单击查看工作演示。
我也遇到了同样的问题。
我在网上可以找到解决问题的方法,但前提是使用
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 作为指令,那么您应该这样做:
div
或 span
中: .mat-cell-value {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
将此输入添加到表格元素:
<table mat-table [fixedLayout] > ... </table>
这个(
[fixedLayout]
)将使所有列具有相同的宽度,因此当调整窗口大小时,列的宽度也会按比例调整大小,并且当列的宽度变得小于其值宽度时,它将修剪该值并添加省略号无法贴合的部分。
我想这也可以通过在列宽度上添加百分比来解决(例如:第一列 - 20%,第二列 - 50%,第三列 - 10%,第四列 - 20%)。重要的是,我们必须以某种方式指定列的宽度,因为默认情况下,mat-table 的列将缩小到可以包含所有值的程度(因此,显然,直到包含最长值的单元格的宽度)它将停止缩小,因此省略号将不起作用,按照前面提到的方式,我们正在强制它进一步缩小。