mat-table - 居中的文本宁愿溢出而不是移到顶部答案

【问题标题】：mat-table - centered text would rather overflow than move towards topmat-table - 居中的文本宁愿溢出而不是移到顶部
【发布时间】：2021-09-14 15:48:31
【问题描述】：

目前，我有一个 Angular 的垫子表。所有内容都居中。在使用mat-table 切换到ng-container 之前，相对简单的CSS 允许将内容较长的一列的文本内容垂直居中。

较旧、简单、有效的 CSS：

padding: 1rem 1rem;
vertical-align: middle;
align-items: center;
justify-items: center;
text-align: center;

我尝试将其复制到 td.mat-row-cell 没有成功，即

td.mat-row-cell {
height: 50px;
min-height: 50px;
max-height: 50px;
vertical-align: middle;
align-items: center;
justify-items: center;
text-align: center;
}

所以我尝试更具体地定位该列，添加：

td.mat-column-example {
min-width: 125px; 
width: 125px;
max-width: 125px !important;
height: 50px;
max-height: 50px;
min-height: 50px;
display: flex;
align-items: center;
}

没有成功。因此，我尝试添加内联样式选项：

style="justify-content: safe"

因为它听起来最合适。但这也无济于事。

【问题讨论】：

我非常不喜欢材料的一点是：您通常必须在styles.css 中更频繁地覆盖它们。我会尝试并确保您的样式得到应用。
当我从带表的半月形移到 ng-container 时，似乎 mat-table 将修复/简化一切。它在 Chrome 和 Edge 中按预期工作。我见过的所有示例都使用相对简单的 CSS 和相对简单的表格来实现这一点。我还没有找到解决方案本身作为使用 Angular 方法的解决方法。

标签： css angular vertical-alignment mat-table

【解决方案1】：

我找到的解决方案更像是一种解决方法。将每个可能的父元素的内边距和边距设置为 0 会有所帮助。但是，较长的文本仍然不会垂直居中，其中心是中心线。因此，我使用ngStyle 编写了一个解决方法。
基本上，如果文本超过最大高度所需的长度，则对齐是顶部。对于更多的自定义，我调用了一个方法，而不是仅仅将样式设置为内联。

<td mat-cell *matCellDef="let example" style="max-height: 50px;" [ngStyle]="checkLength(example.text.length)"> {{example.text}} </td>

而app组件example.component.ts中对应的函数是：

checkLength(length): Record<string, unknown> {
  if (length > 100) { 
    return {'vertical-align': 'top', 'text-align': 'top'};
    }
  return {};
  }

【讨论】：