Mat-tree文本过多时边框对齐异常：边框线缺失修复咨询

这个问题本质是节点容器的布局没有适配文本换行场景，导致边框无法完整包裹多行内容，以下是具体修复方案：

核心CSS调整 #

通过修改节点容器和文本容器的样式，确保内容换行时容器高度自适应，边框完整显示：

/* 基础节点样式调整 */
.mat-tree-node {
  display: flex;
  align-items: flex-start; /* 文本换行时顶部对齐，避免垂直居中导致边框截断 */
  min-height: 48px; /* 保留Material Design最小高度，同时允许内容撑开容器 */
  border-bottom: 1px solid #e0e0e0; /* 确保底部边框覆盖整个节点高度 */
  padding: 8px 0; /* 调整内边距，优化多行文本显示效果 */
}

/* 嵌套节点缩进样式适配 */
.mat-nested-tree-node {
  padding-left: 40px;
}

/* 文本容器允许换行 */
.tree-node-text {
  flex: 1;
  white-space: normal; /* 取消默认强制不换行设置，允许文本自动换行 */
  word-wrap: break-word; /* 超长单词强制换行 */
}

关键修改点说明 #

1. white-space: normal：取消文本强制不换行的默认设置，让超长文本自动换行，避免内容溢出容器
2. align-items: flex-start：让节点内元素顶部对齐，防止文本换行后容器高度被垂直居中布局限制
3. min-height替代固定height：保证节点有最小高度的同时，允许内容撑开容器高度，边框会随容器高度延伸

如果使用的是mat-tree-table组件，还需额外调整表格单元格样式：

.mat-tree-table td {
  white-space: normal;
  table-layout: auto; /* 取消固定表格布局，让单元格宽度随内容自适应 */
}

验证修改 #

修改后刷新页面，超长文本会自动换行，节点容器高度随内容调整，边框将完整包裹整个节点区域。

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