如何解决Angular <mat-list>组件文本重叠、实现内容自动向下扩展的问题

这个问题是Angular Material mat-list-item 的默认样式限制导致的：默认给列表项设置了固定高度，且内部文本强制不换行，宽度不足时就会出现文本溢出重叠的问题，按以下步骤调整即可：

• 第一步：给 mat-list 添加自定义类名，示例如下：

<mat-list class="wrap-list">
    <mat-list-item>This is a very long text to check for overlapping. This is a very long text to check for overlapping. This is a very long text to check for overlapping.</mat-list-item>
    <mat-list-item>This is a very long text to check for overlapping. This is a very long text to check for overlapping. This is a very long text to check for overlapping.</mat-list-item>
    <mat-list-item>This is a very long text to check for overlapping. This is a very long text to check for overlapping. This is a very long text to check for overlapping.</mat-list-item>
</mat-list>

• 第二步：添加对应的CSS样式，兼容新旧版本Angular Material：

/* 取消列表项固定高度，让高度随内容自动撑开 */
.wrap-list .mat-list-item,
.wrap-list .mat-mdc-list-item {
  height: auto !important;
  padding: 8px 0 !important; /* 可自定义上下间距 */
}

/* 允许内部文本自动换行 */
.wrap-list .mat-list-item .mat-line,
.wrap-list .mat-mdc-list-item .mat-mdc-list-item-line {
  white-space: normal !important;
  word-wrap: break-word !important;
}

• 注意事项：
  如果在组件的独立样式文件中添加上述代码不生效，可以任选一种方式处理：

1. 将这段CSS放到项目全局的styles.css/styles.scss文件中
2. 给组件加上encapsulation: ViewEncapsulation.None配置取消视图封装
3. 临时使用::ng-deep修饰样式选择器（官方已不推荐，仅做临时兼容用）

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