Angular Material Table - CSS 在文本换行时让标题左对齐

Posted 2023-03-06

【中文标题】Angular Material Table - CSS 在文本换行时让标题左对齐

【英文标题】：Angular Material Table - CSS to get headers to left align when text wraps

【发布时间】：2019-06-16 14:17:13

【问题描述】：

使用Angular Material Table 组件，默认情况下，表格上的列标题将左对齐，这很棒：

但是，如果没有足够的空间放置标题，则文本会换行，这很好，除了文本然后居中对齐...

如何使文本左对齐？我认为这将是直截了当的，但我遇到了问题。这似乎也只发生在带有排序的标题上，因为如果您从任何标题单元格中删除 mat-sort-header 指令，事情就会正确对齐。

我尝试添加以下 css 类定义，但没有成功：

.mat-sort-header-button 
    text-align: left;

Here is the demo我在玩。

【问题讨论】：

stackblitz.com/edit/angular-dhq2cv-8rtpvp?file=app/…

太棒了，谢谢！如果你把它作为答案，我会这样标记它。

【参考方案1】：

如果有人仍在寻找全局样式，请检查此。

StackBlitz link for sort header alignment

在 style.css 中定义以下样式：

用于排序标题或普通标题中的文本对齐

th.text-align-left,th.text-align-left .mat-sort-header-button 
    text-align: left !important;

th.text-align-right,th.text-align-right .mat-sort-header-button 
    text-align: right !important;

th.text-align-center,th.text-align-center .mat-sort-header-button 
    text-align: center !important;

用于排序标题中的内容对齐

th.align-center .mat-sort-header-container 
    justify-content: center;

th.align-right .mat-sort-header-container 
    justify-content: flex-end;

th.align-left .mat-sort-header-container 
    justify-content: flex-start;

你可以在 th 中使用这些 text-align-left、align-left 等类

【参考方案2】：

您的样式不起作用的原因是 Angular 默认使用 Emulated 封装，因此您的样式是组件范围的。这意味着您只能将类应用于直接放置在组件模板中的元素。您不能设置嵌套组件的样式。

要对嵌套组件中的元素进行样式设置，您必须使用 ::ng-deep 选择器：

::ng-deep .mat-sort-header-button 
  text-align: left;

Forked Stackblitz

还有其他方法可以解决：

使用encapsulation: ViewEncapsulation.None

使用全局样式