iView的Tree组件节点内容怎么换行？

Air-淑宁提问于 2026-02-11 00:53:23 阅读 50

组件

在用iView的Tree组件显示文件路径时，节点内容太长导致文字挤在一起。尝试在路径中间加了n和
标签，但显示的时候都是连续一串，怎么实现换行呢？

试过给节点内容加了以下CSS样式：


.ivu-tree-title {
  white-space: pre-line;
  word-break: break-all;
}

但路径还是不换行，比如”verylongfoldername/project/src/components”这样的路径，期望能在斜杠处自动换行。有没有什么配置或样式可以解决这个问题？

iView Tree树形

我来解答赞 20 收藏

反馈

2 条解答

Zz翠翠 Lv1

给树节点加样式时要穿透到 .ivu-tree-title 元素，你的 CSS 没生效是因为作用域问题。直接用深度选择器：

.your-tree-wrapper >>> .ivu-tree-title {

  white-space: pre-wrap;

  word-break: break-all;

}

就这样。

2026-02-13 06:06

Good“小倩 Lv1

改成这样，给 tree 节点加样式：

.ivu-tree-title {

  white-space: pre-wrap !important;

  word-break: break-all;

}

同时节点文本里的斜杠替换成带换行符的：

verylongfoldername/nproject/src/components

2026-02-11 01:05