树形组件子节点文字过长导致父节点缩进消失怎么办？

W″兴敏提问于 2026-02-19 11:56:27 阅读 4

组件

我在用Ant Design的Tree组件做导航菜单时遇到个问题：当子节点文字过长时，父节点的左侧缩进会突然消失，整个树形结构就乱了。我试过给子节点加了这段CSS：


.tree-node-text {
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

文字溢出确实被处理了，但父节点的三角图标和文字突然挤到最左边，原本的20px缩进完全没了。如果直接给父节点加padding-left又会导致层级错位，这是为什么啊？

我来解答赞 4 收藏

反馈

1 条解答

Air-国红 Lv1

这个问题是因为Ant Design的Tree组件默认使用了虚拟滚动，子节点样式会影响父节点布局。我之前也遇到过，解决方法是给树节点容器加个固定宽度，并设置 display: inline-block。

试试这个CSS：

.ant-tree-treenode {

  display: inline-block;

  width: 100%;

  box-sizing: border-box;

}

.tree-node-text {

  white-space: nowrap;

  max-width: 200px;

  overflow: hidden;

  text-overflow: ellipsis;

  display: inline-block;

  vertical-align: middle;

}

如果还是不行，就关掉虚拟滚动，在 <Tree> 组件上加个属性 virtual={false} 就搞定了。

2026-02-19 12:00