如何让jsTree节点文本超出容器宽度时自动换行？

问题场景 #

使用Bootstrap栅格布局，左侧col-4列放置jsTree组件，右侧col-8列展示选中节点数据。当节点名称超出col-4列宽时，jsTree默认不会自动换行，导致文本溢出容器。

相关代码如下：

HTML代码 #

<div class="container">
  <div class="row">
    <div class="col-4 border border-success">
      <div id="jstree_demo_div"></div>
    </div>
    <div class="col-8 border border-danger">
      <p>Hello world</p>
    </div>
  </div>
</div>

JavaScript代码 #

$(document).ready(function() {
  $('#jstree_demo_div').jstree({
    'core': {
      'data': [
        'Simple root node with a very long name which will overflow to the right container'
      ]
    }
  });
});

解决方案 #

jsTree默认给节点锚点元素设置了white-space: nowrap强制单行显示，只需通过CSS覆盖该样式即可实现自动换行：

.jstree-anchor {
  white-space: normal !important;
  height: auto !important;
}

样式说明 #

• white-space: normal：恢复文本默认的换行规则，替代jsTree的单行强制设置
• height: auto：让节点高度随文本行数自动调整，避免多行文本被截断

如果需要给折叠/展开图标预留足够空间，可额外添加内边距：

.jstree-anchor {
  white-space: normal !important;
  height: auto !important;
  padding-right: 24px;
}

设置完成后，节点文本会在容器宽度范围内自动换行，不会溢出。

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