在 jstree 节点文本和滚动条之间添加间隙

Question

我在一个比树还小的容器中有一个简单的 jstree:

<div style="width:250px;height:150px; border:solid; overflow: auto;">
  <div id="jstree" style="padding:20px"></div>
</div>

在 plunkr

查看演示

我正在尝试在节点文本的可见部分和滚动条之间添加视觉效果 space（即 5px）。这样在截断线的末端和垂直滚动条之间有一个间隙，截断线的末尾有'..'，在树的底部和水平滚动条之间有一个间隙。

我看了这里的很多帖子并尝试了填充、边距、包装 div 等的各种组合，但没有成功。

我正在寻找的解决方案是：

最好只css
在节点文本的可见部分与水平和垂直滚动条之间添加一个间隙
向截断节点的文本添加省略号
适用于 jquery.scrollbar

谢谢！

Answer 1

您好，这是解决此问题的方法...请检查 https://jsfiddle.net/RRR0308/jfu845zr/ ...我已将绝对定位的 div 插入 main div 并设置了高度和宽度，使其产生 10px 边距的效果。

HTML

<div style="width:250px;height:150px; border:solid; overflow: auto;">
      <div id="jstree" style="padding:20px"></div>
      <div class="xyz"></div>
</div>

CSS

.xyz{
  position:absolute;
  height:133px;
  width:10px;
  background:#F3F5F6;
  z-index:999;
  top:11px;
  left:235px;

}

更新演示：https://jsfiddle.net/RRR0308/jfu845zr/3

Answer 2

我了解到您正试图在文本被 div 溢出之前添加省略号。根据滚动条的移动，将显示文本。

基本上，我在插件触发ready.jstree事件后添加了一个计算。

$('#jstree').on('ready.jstree', function() {
    resizeWrap();
});

请检查我的完整解决方案： https://jsfiddle.net/alexndreazevedo/qozdy7m8/

Answer 3

这会在节点文本的可见部分与水平和垂直滚动条之间添加一个间隙（5px 添加）。

它还会在截断节点的文本中添加一个省略号。

.jstree-anchor {
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
}

在 jstree 节点文本和滚动条之间添加间隙

Add a gap between jstree nodes text and scrollbars

html

css

jquery

jstree