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

Question

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

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

在 plunkr 查看演示

我试图在节点文本的可见部分和滚动条之间添加一个可视空间(即 5px)。这样在截断线的末端和垂直滚动条之间有一个间隙，截断线的末尾有'..'，在树的底部和水平滚动条之间有一个间隙。

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

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

• 最好只使用 CSS
• 在节点文本的可见部分与水平和垂直滚动条之间添加一个间隙
• 在截断节点的文本中添加省略号
• 与 jquery.scrollbar 合作

谢谢!

Answer 1

您好，这是解决此问题的方法...请查看 https://jsfiddle.net/RRR0308/jfu845zr/ ...我在主 div 中插入了一个绝对定位的 div，并设置了高度和宽度，使其产生 10 像素边距的效果。

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