代码之家 › 专栏 › 技术社区 › Andrew

角度材质表-文本换行时CSS使标题左对齐

angular-material sass typescript angular css

Andrew · 技术社区 · 6 年前

和 Angular Material Table 组件,默认情况下,表上的列标题将左对齐,这很好:

但是,如果页眉没有足够的空间,则文本将换行,这很好,只是文本将居中对齐。。。

如何使文本左对齐?我以为这会很直接,但我有问题。这也只出现在带有排序的标题上,因为如果删除 mat-sort-header 指令的任何标题单元格,左对齐正确。

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

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

Here is the demo

1 回复 | 直到 6 年前

yurzui 6 年前

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

要设置嵌套组件中元素的样式,必须使用::ng deep selector:

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

Forked Stackblitz

还有其他解决方法:

encapsulation: ViewEncapsulation.None
使用全局样式

Amith B 3 年前

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

StackBlitz link for sort header alignment

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

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;
}

您可以在中使用这些文本左对齐、左对齐等类

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前