Angular 14升级至15后Angular Material日期范围选择器标签文本溢出

Angular Material组件有自身的DOM层级和样式隔离机制，直接给<mat-label>加overflow:hidden不会生效——标签实际被包裹在组件内部的容器中，必须穿透样式隔离才能修改目标元素的样式。

以下是两种可行的解决方案：

方案1：设置溢出省略效果 #

给日期范围选择器的容器添加自定义类，比如long-label-date-picker，通过::ng-deep穿透样式隔离，针对标签容器配置溢出样式：

模板代码 #

<mat-form-field class="long-label-date-picker">
  <mat-label>这是一段超长的日期范围选择器标签文本，用来测试溢出问题的解决方案</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="开始日期">
    <input matEndDate placeholder="结束日期">
  </mat-date-range-input>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

样式代码 #

::ng-deep .long-label-date-picker .mat-mdc-form-field-label-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px; /* 可根据布局需求调整最大宽度 */
}

方案2：调整标签布局避免挤压 #

如果希望标签不占用过多横向空间，可以设置floatLabel="always"让标签始终浮动在输入框上方，再配合样式优化：

模板代码 #

<mat-form-field class="long-label-date-picker" floatLabel="always">
  <mat-label>这是一段超长的日期范围选择器标签文本，用来测试溢出问题的解决方案</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="开始日期">
    <input matEndDate placeholder="结束日期">
  </mat-date-range-input>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

样式代码 #

::ng-deep .long-label-date-picker .mat-mdc-floating-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%; /* 限制标签在表单域内的宽度占比 */
}

说明：::ng-deep用于突破Angular的视图封装，确保样式能作用到Material组件内部的DOM元素。如果项目禁用了::ng-deep，也可以把样式放到全局样式文件（比如styles.css）中，无需添加深度选择器。

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