Angular Material mat-card长文本溢出无法换行自适应高度问题咨询

你遇到的样式不生效问题，根源是Angular Material的mat-list-item默认设置了固定高度，同时matLine指令绑定的元素自带white-space: nowrap的单行截断默认样式，上层父元素的限制导致你给span加的换行属性无法生效。以下是保留原有布局的完整解决方案：

第一步：修改HTML代码 #

仅给需要换行的公钥列表项添加自定义类，其余原有结构完全不动，避免影响其他列表布局：

<mat-card>
    <mat-card-content>
        <mat-list>
            <mat-list-item>
                <mat-icon matListIcon>tag</mat-icon>
                <p matLine> <b> ID </b> </p>
                <p matLine>
                    <span matLine> id </span>
                </p>
            </mat-list-item>

            <mat-list-item>
                <mat-icon matListIcon>edit_attributes</mat-icon>
                <p matLine> <b>TYPE</b> </p>
                <p matLine>
                    <span> type </span>
                </p>
            </mat-list-item>

            <mat-list-item>
                <mat-icon matListIcon>games</mat-icon>
                <p matLine> <b>CONTROLLER</b> </p>
                <p matLine>
                    <span> controller </span>
                </p>
            </mat-list-item>

            <!-- 仅给公钥对应的列表项加自定义类 -->
            <mat-list-item class="long-text-item">
                <mat-icon matListIcon>vpn_key</mat-icon>
                <p matLine> <b>PUBLIC KEY</b> </p>
                <p matLine>
                    <span class="public-key-content"> 7te19UzPj9VUeTF23LK65Ta08W7i13uw60Py1D0oP2b43F17f0P41DU39805F34305w4rg545f6EO48y5KFgh9M618231813E67az681I04UkkH3ti4x4s8809HMS474K9t7XJ29Hm033W51DD77403sn4Uw4h897R91J59IjDdXQ3WSej3v448FXEr8T56uN9UWWs3m86if68Q3c4c2M35hv4FOgZC5MlDNNBngyj9o7nWY5B76Gv785E9dW9484724743XK2BI5H1ZR1h55s9750L3FH54645415D4N71srWk8q51b272k408Y22gXPS1K527V27XH33pW8eR516v8sj6ZS93ss39Z5540MyKu0OA2SA5pQ57L30G19909Sh73uv899x555DGd311m73u519kPqd3gBb39s6AG2b73iO7835C2elW5R81csn617L6yZ8Z357x6QS4Slo67i9ZUrEMx69nh12K96474oXx03nf79Qj9 </span>
                </p>
            </mat-list-item>
        </mat-list>
    </mat-card-content>
</mat-card>

第二步：添加对应CSS样式 #

如果在组件独立样式文件中编写，用:host ::ng-deep穿透Angular样式封装，只会作用于当前组件，不会全局污染其他组件样式：

/* 仅覆盖带自定义类的列表项固定高度限制 */
:host ::ng-deep .long-text-item {
  height: auto !important;
  /* 保留原有列表项的上下内边距，维持布局间距和其他项一致 */
  padding: 8px 0;
}

/* 取消当前项matLine的单行截断默认设置 */
:host ::ng-deep .long-text-item p[matLine] {
  white-space: normal !important;
  line-height: 1.5;
  margin: 4px 0;
}

/* 长公钥文本强制换行 */
.public-key-content {
  word-break: break-all;
  overflow-wrap: break-word;
  width: 100%;
}

效果说明 #

1. 其余普通列表项完全保留原有默认布局和间距，不会出现样式错乱
2. 公钥所在列表项会根据文本长度自动撑开高度，文本正常换行
3. mat-card容器会自动跟随内容调整整体高度，完整展示所有内容

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