如何在jstree节点中用省略号截断长文本并添加tooltip

我来帮你搞定这个问题！针对上传长文本后弹窗宽度变化、节点文本过长的情况，我们可以从CSS截断文本和添加Tooltip两方面入手，结合你的AngularJS+oe-jstree环境，具体方案如下：

一、用CSS实现节点文本单行截断（显示省略号） #

jstree的节点元素有固定的类名，我们可以通过自定义CSS强制文本单行显示并截断，从根源避免长文本撑宽弹窗：

/* 限制树形容器内节点的宽度，确保继承父容器宽度 */
#documenttree .jstree-container-ul {
  width: 100%;
}

/* 处理节点锚点元素：强制单行、截断显示省略号 */
#documenttree .jstree-anchor {
  white-space: nowrap;       /* 禁止文本换行 */
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;   /* 溢出部分显示省略号 */
  max-width: calc(100% - 35px); /* 减去图标、缩进的宽度，可根据实际视觉效果调整数值 */
}

二、添加Tooltip显示完整文本 #

有两种简单的实现方式，你可以根据需求选择：

方式1：利用jstree原生title属性（最简单） #

你已经在使用tree-node-creator="createNode(item)"创建节点，直接在这个函数里给节点添加title属性即可，浏览器会自动在hover时显示完整文本：

$scope.createNode = function(item) {
  return {
    text: item.name,          // 节点显示截断后的文本
    title: item.name,         // 完整文本作为Tooltip内容
    // 你的其他节点配置（比如icon、state等）
  };
};

方式2：自定义Tooltip（更美观，可选） #

如果原生title的样式不符合你的UI需求，可以用jQuery UI Tooltip（或其他前端Tooltip组件）来定制样式。在节点创建完成后绑定Tooltip：

$scope.NodeCreated = function(item, callback) {
  // 先执行原有回调逻辑
  callback();
  
  // 给所有节点锚点绑定自定义Tooltip
  $('#documenttree .jstree-anchor').tooltip({
    content: function() {
      // 从title属性获取完整文本
      return $(this).attr('title');
    },
    delay: 200,               // 延迟200ms显示，避免误触
    track: true,              // Tooltip跟随鼠标移动
    tooltipClass: 'custom-jstree-tooltip' // 自定义样式类，方便调整外观
  });
};

配合自定义Tooltip的样式：

.custom-jstree-tooltip {
  background-color: #2c3e50;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

三、额外优化：固定弹窗宽度 #

如果弹窗还是因为其他元素撑宽，可以给弹窗容器设置最大宽度，确保整体布局稳定：

/* 假设你的弹窗容器类是modal-content，根据实际HTML结构调整 */
.modal-content {
  max-width: 850px;
  width: 90vw; /* 响应式适配不同屏幕宽度 */
}

这样处理后，长文本节点会自动截断显示省略号，hover时能看到完整内容，同时弹窗宽度也能保持稳定啦！

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