如何解决mat sort header单元格文本换行后出现额外宽度的问题？

问题根因 #

该问题是Angular Material中mat-sort-header的默认布局规则导致的：默认表头容器的内容区mat-sort-header-content未限制flex伸缩规则，文本换行时内容区会自动抢占列内所有剩余宽度，将排序箭头推到列的最右侧。

修复方案 #

方案1：全局/组件内样式覆盖（适配旧版Material） #

如果是在组件内修改，直接在组件的样式文件中添加以下代码即可：

::ng-deep .mat-sort-header-container {
  display: flex;
  align-items: center;
  gap: 6px; // 可自定义文本和排序箭头的间距
}

::ng-deep .mat-sort-header-content {
  flex: 0 1 auto; // 仅占用文本实际需要的宽度，不抢占剩余空间
}

如果是全局样式引入，去掉::ng-deep前缀即可。

方案2：适配Angular 15+ MDC版本Material #

新版Material使用MDC组件体系，选择器需要对应调整：

::ng-deep .mat-mdc-sort-header-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

::ng-deep .mat-mdc-sort-header-content {
  flex: 0 1 auto;
}

方案3：定向修改（避免全局污染） #

如果不想全局修改所有排序表头，可以给需要调整的列添加自定义类：

1. 在表头th标签上添加类名：

<th mat-sort-header class="custom-sort-header">超长表头文本示例</th>

2. 在全局样式文件中添加对应规则：

.custom-sort-header .mat-sort-header-content {
  flex: 0 1 auto;
}
.custom-sort-header .mat-sort-header-container {
  justify-content: flex-start;
  gap: 6px;
}

如果设置了固定列宽，可以给内容区添加overflow-wrap: break-word保证文本正常换行，不会超出列宽范围。

内容的提问来源于stack exchange，提问作者Michael Parkadze