mat-expansion-panel收缩时mat-panel-description内容裁剪如何解决

AI 小北

2026-9-30

解决方案

问题根因：Angular Material 中 mat-expansion-panel-header 默认配置了固定高度与overflow: hidden属性，且mat-panel-description默认强制文本不换行，所以内容过长时会出现上下边缘裁剪的情况。

方法1：覆盖默认组件样式

你可以通过局部或全局样式修改默认配置，解除高度限制、允许文本换行：

如果你想仅在当前组件生效，在组件对应的css文件中添加如下代码：

/* 解除头部固定高度限制，自适应内容高度 */
::ng-deep mat-expansion-panel-header {
  height: auto !important;
  /* 可根据设计需求调整内边距数值 */
  padding: 16px 24px !important;
}

/* 允许描述文本换行 */
::ng-deep .mat-expansion-panel-header-description {
  white-space: normal !important;
  line-height: 1.5 !important;
}

如果你希望全局所有扩展面板都生效，将上述代码去掉::ng-deep前缀后，放入项目全局styles.css文件中即可。

方法2：加自定义类限定生效范围（避免样式污染）

如果担心::ng-deep会污染全局样式，可以给扩展面板加自定义类限定作用范围：

修改HTML代码，给面板头部添加自定义类：

<mat-expansion-panel-header class="custom-panel-header">
  <mat-panel-title>
    Filtri
  </mat-panel-title>
  <mat-panel-description>
    {{filteredDescription}}
  </mat-panel-description>
</mat-expansion-panel-header>

组件css中添加对应样式：

::ng-deep .custom-panel-header {
  height: auto !important;
  padding: 16px 24px !important;
}

::ng-deep .custom-panel-header .mat-expansion-panel-header-description {
  white-space: normal !important;
}