Angular Material2 mat-tree节点名称截断：换行/滚动方案求助

我之前也碰到过类似的Mat-Tree嵌套节点文本截断的问题，尤其是层级深、文本长的时候，默认样式确实会有这类限制。咱们一步步来排查解决：

1. 先修正父容器的基础样式 #

你提到把树放在高度为屏幕30%的div里，首先得确保这个容器的宽度和溢出规则没有锁死内容：

.tree-container {
  height: 30vh; /* 用vh更精准对应屏幕高度的30% */
  width: 100%; /* 或者根据布局需求设固定值/百分比，避免宽度被内容挤压 */
  overflow: auto; /* 同时开启垂直+水平方向的自动溢出，先确保基础滚动生效 */
}

注意：如果这个容器的父元素有overflow: hidden，会直接导致你设置的overflow-x: scroll失效，一定要先排查这一点。

2. 覆盖Mat-Tree节点的默认截断样式 #

Angular Material的mat-tree-node默认会设置white-space: nowrap和text-overflow: ellipsis来强制单行截断，这是最常见的问题根源，需要手动覆盖：

/* 针对所有树节点 */
.mat-tree-node {
  white-space: normal; /* 取消强制单行，允许文本换行 */
  overflow-wrap: break-word; /* 长单词自动换行 */
  min-width: fit-content; /* 让节点宽度适配内容，避免被父容器强制压缩 */
}

/* 针对嵌套的三级节点，确保缩进后仍有足够宽度 */
.mat-nested-tree-node {
  width: 100%;
}

如果三级节点的缩进太大挤占了文本空间，还可以调整缩进的padding：

/* 调整嵌套节点的缩进，给长文本留更多空间 */
.mat-tree-node .mat-tree-node {
  padding-left: 20px; /* 替换成你觉得合适的值，默认可能是32px左右 */
}

3. 给树的内部滚动容器单独设置样式 #

有时候Mat-Tree的滚动需要作用在内部的.mat-tree-content容器上，而不是外层div，你可以单独给这个容器配置：

.mat-tree-content {
  overflow-x: auto;
  overflow-y: auto;
  width: 100%;
}

4. 调试技巧 #

如果以上设置还是没生效，打开浏览器开发者工具，选中被截断的节点元素，查看它的计算样式：

• 检查是否有父元素强制设置了width或max-width
• 确认white-space是否被正确覆盖为normal
• 排查是否有自定义样式或第三方样式和Mat-Tree的默认样式冲突

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