Angular Material扩展面板描述文本动态宽度溢出显示省略号

要实现你想要的效果——让mat-panel-description里的长文本在溢出时显示省略号，同时随窗口缩放自动调整显示长度，只需要通过简单的CSS样式调整就能搞定，下面是完整的实现方案：

完整代码示例 #

HTML代码

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title> Personal data </mat-panel-title>
      <mat-panel-description>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </mat-panel-description>
    </mat-expansion-panel-header>
    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
</mat-accordion>

CSS代码

mat-panel-description {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

mat-panel-title {
  white-space: nowrap;
}

样式说明 #

• mat-panel-description的样式：

  • overflow: hidden：隐藏超出容器的文本内容
  • white-space: nowrap：强制文本在一行显示，不自动换行
  • text-overflow: ellipsis：当文本溢出时，在末尾显示省略号
  • width: 100%：让描述区域占满mat-expansion-panel-header分配给它的可用空间，配合flex布局实现响应式缩放

• mat-panel-title的样式：

  • white-space: nowrap：确保标题也在一行显示，避免标题换行挤压描述区域的空间，这样描述区域的宽度会随窗口大小自动调整——窗口越大，可用宽度越多，显示的文本就越长；窗口越小，宽度收缩，文本就会触发省略号。

因为mat-expansion-panel-header默认采用flex布局，所以标题和描述会自动分配可用空间，完全适配窗口缩放的场景，不需要额外的媒体查询就能实现响应式效果。

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