mat-table - 如果任何列的内容很长，则溢出父 div答案

【问题标题】：mat-table - overflows parent div if the content of any of the column is very longmat-table - 如果任何列的内容很长，则溢出父 div
【发布时间】：2019-07-20 17:36:07
【问题描述】：

使用angular材质组件mat-table和angular flex布局在div内显示数据表。

stackblitz link

无法固定 div 内表格的宽度。如果任何一列的数据较长，则该表会溢出父 div。

预期的行为是为具有较长数据的列显示椭圆，并且表格宽度应该是固定的（100% 在父 div 内）并且不依赖于列数据。

【问题讨论】：

使用这个 css .mat-cell, .mat-header-cell { overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
@BearNithi 这修复了表格溢出问题，但它没有给出椭圆来指示内容被截断。而是将内容分成多行（有时这不是所需的行为，因为无法控制正在显示的数据中发生中断的位置）
将 CSS 交给 mat-cell {word-break:break-all;}
这是一个令人惊讶的难题。这是一个关于它的官方帖子github.com/angular/components/issues/9874

标签： angular angular-material angular-material2 angular-flex-layout

【解决方案1】：

最好的解决方案是不要使用自定义 CSS

Just Replace Your <table></table> Tag with <mat-table></mat-table>

我希望这对你有用

【讨论】：

我尝试删除所有自定义 CSS 并将 table 标签更改为 mat-table。表溢出问题已修复，但列数据仍然溢出 - stackblitz
单元格内文本的垂直对齐也会失真
使用下面的答案 CSS 和我的答案将解决问题.mat-cell, .mat-header-cell { overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
它不修复单元格中数据的垂直对齐方式。无论如何，我能够用 flex-layout-align 修复它。但是当单元格数据被截断时，使用它会删除椭圆。所以我不得不将单元格数据包装在另一个具有overflow: hidden; text-overflow: ellipsis; -- stackblitz 的范围内
老兄，这确实是我的问题。