Aggiungere un divario tra jstree testo i nodi e le barre di scorrimento

Question

Ho una semplice jstree in un contenitore che è più piccolo di l'albero:

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

vedere demo plunkr

Sto cercando di aggiungere uno spazio visivo (cioè di 5px) tra la porzione visibile del testo del nodo e le barre di scorrimento. in modo che vi sia uno spazio tra la fine di una linea tratteggiata e la barra di scorrimento verticale e le linee tratteggiate abbiano ".." alla fine e uno spazio tra la parte inferiore dell'albero e la barra di scorrimento orizzontale.

Ho visto molti post qui e ho provato varie combinazioni di padding, margini, div del wrapping ecc. Ma nessun successo.

La soluzione che sto cercando è:

• idealmente css solo
• aggiunge un divario tra la parte visibile del testo del nodo e sia l'orizzontale e la barra di scorrimento verticale
• aggiunge puntini di sospensione per troncato testo
• opere del nodo con jquery.scrollbar

thx!

Answer 1

ho capito che si sta cercando di aggiungere puntini di sospensione prima del testo essere traboccato dai div. Di conseguenza al movimento della barra di scorrimento, il testo sarebbe mostrato.

Fondamentalmente, aggiungo un calcolo dopo che il plug-in attiva l'evento ready.jstree.

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

favore, controllare la soluzione completa: https://jsfiddle.net/alexndreazevedo/qozdy7m8/

Answer 2

Ciao ecco una soluzione per questo problema ... si prega di controllare https://jsfiddle.net/RRR0308/jfu845zr/ ... Ho inserito un div posizionato in assoluto in div principale e ho impostato l'altezza e la larghezza in modo che dia l'effetto di 10px margine.

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; 

} 

demo aggiornata: https://jsfiddle.net/RRR0308/jfu845zr/3

Answer 3

Questo aggiunge uno spazio tra la parte visibile del testo del nodo e sia orizzontale che la barra di scorrimento verticale (5px aggiunto).

Aggiunge inoltre un'ellissi al testo del nodo troncato.

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