I have a simple jstree in a container that is smaller than the tree:

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

```

see demo at [plunkr](https://plnkr.co/edit/VIFRq9kSShPtHU2tKfF1?p=preview)

I am trying to add a visual space (ie of 5px) between the visible portion of the node's text and the scrollbars. so that there is a gap between the end of a chopped line and the vertical scrollbar and the chopped lines have '..' in the end, and a gap between the bottom of the tree and the horizontal scrollbar. 

I have looked at many posts here and tried various combinations of padding, margins, wrapping divs etc but no success.

The solution I am looking for is:

* ideally css only
* adds a gap between the visible portion of the node's text and both the horizontal and the vertical scrollbar
* adds ellipsis to truncated node's text
* works with [jquery.scrollbar](https://github.com/gromo/jquery.scrollbar)

thx!