Mat-form-field标签过长不截断问题求助：需恢复v12版本表现

Angular Material 13及后续版本调整了<mat-form-field>标签的默认样式逻辑，取消了标签超出时的自动截断效果。要恢复Angular 12的标签截断行为，可通过自定义CSS覆盖默认样式：

• 基础截断样式（适配标签浮动到输入框上方的场景）：

  .mat-form-field-label-wrapper {
    overflow: hidden;
  }
  
  .mat-form-field-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
  }
  

• 兼容标签未浮动状态（标签处于输入框内部时）：

  .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
  .mat-form-field-can-float:not(.mat-form-field-should-float) .mat-form-field-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: calc(100% - 24px); /* 预留前缀/后缀图标的空间，可按需调整数值 */
  }
  

注意事项 #

• 若使用组件视图封装，需在样式前添加::ng-deep（或关闭组件视图封装），示例：

  ::ng-deep .mat-form-field-label-wrapper {
    overflow: hidden;
  }
  
  ::ng-deep .mat-form-field-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
  }
  

• 若表单字段包含前缀、后缀元素，可根据实际布局调整max-width的数值，避免标签与图标重叠。

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